Filtering

Enable filtering by setting the filter option to true. Filtering happens on the client side by default, however remote filtering can be implemented using the onFilter event.

Get started with this example

Demo

Loading the live demo

Preview in full screen

Code

View code on GitHub 
<script setup>
import { getJson, MbscPage, MbscSelect, setOptions  } from '@mobiscroll/vue'
import { onMounted, ref } from 'vue'

setOptions({
  locale:  ,
  theme: ' ',
  themeVariant: ' '
})

const remoteData = ref([])
const names = [
  { text: 'Abigail Hodges', value: 1 },
  { text: 'Adam Robertson', value: 2 },
  { text: 'Blake Nolan', value: 3 },
  { text: 'Dylan Manning', value: 4 },
  { text: 'Jane Clarkson', value: 5 },
  { text: 'Julian Parr', value: 6 },
  { text: 'Lily Blake', value: 7 },
  { text: 'Luke Wright', value: 8 },
  { text: 'Nathan Poole', value: 9 },
  { text: 'Olivia Vance', value: 10 },
  { text: 'Paul Hudson', value: 11 },
  { text: 'Rose Taylor', value: 12 },
  { text: 'Samantha Martin', value: 13 },
  { text: 'Steven Cameron', value: 14 },
  { text: 'Wanda Mills', value: 15 }
]

function remoteFiltering(filterText) {
  getJson(
    'https://trial.mobiscroll.com/airports/' + encodeURIComponent(filterText),
    (data) => {
      const airports = []
      for (const item of data) {
        airports.push({ text: item.name, value: item.code })
      }
      remoteData.value = airports
    },
    'jsonp'
  )
}

function handleFilter(ev) {
  remoteFiltering(ev.filterText)
  return false
}

onMounted(() => {
  remoteFiltering('')
})
</script>

<template>
  <MbscPage>
    <div class="mbsc-grid mbsc-form-grid">
      <div class="mbsc-row">
        <div class="mbsc-col-sm-12 mbsc-col-md-6">
          <MbscSelect
            :data="names"
            :filter="true"
            :buttons="undefined"
            display="center"
            label="Local data"
            labelStyle="stacked"
            inputStyle="box"
            placeholder="Please select..."
          />
        </div>
        <div class="mbsc-col-sm-12 mbsc-col-md-6">
          <MbscSelect
            :data="remoteData"
            :filter="true"
            display="anchored"
            label="Remote data"
            labelStyle="stacked"
            inputStyle="box"
            placeholder="Please select..."
            @filter="handleFilter"
          />
        </div>
      </div>
    </div>
  </MbscPage>
</template>

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.