---
title: "Javascript Select Filtering Example | Mobiscroll"
component: "Select"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/select/filtering-values"
---
# Filtering - JavaScript Select demo
Javascript select with filtering. Type in the header of the dropdown and filter values locally or remotely. Plain JavaScript API.
- [Live demo](https://demo.mobiscroll.com/javascript/select/filtering-values)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/pickers/select/filtering-values)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/select/filtering-values.md), [Angular](https://demo.mobiscroll.com/angular/select/filtering-values.md), [React](https://demo.mobiscroll.com/react/select/filtering-values.md), [Vue](https://demo.mobiscroll.com/vue/select/filtering-values.md)
## Description
Enable filtering by setting the [`filter` option](https://mobiscroll.com/docs/javascript/select/api#opt-filter) to `true`. Filtering happens on the client side by default, however remote filtering can be implemented using the [`onFilter` event](https://mobiscroll.com/docs/javascript/select/api#event-onFilter).
## What this demo shows
- Two select examples displayed side by side demonstrate filtering with local and remote data.
- **Select inputs** Focusing or clicking either input opens its picker below the input.
- **Input behavior** Clicking outside an open picker closes it.
- **Filtering** Entering a name in the search field filters the available options. The left example filters local data, while the right example filters remote data.
- **Picker content** Each picker displays a predefined list of options in a dropdown-style popup.
- **Hover state** Hovering over an option highlights it.
- **Selection** The selected option is marked with a checkmark.
- **Scrolling** Users can scroll through the available options.
- **Input value** Selecting an option updates the input with the selected value.
## Best for
- **Local reference lists** Filter a fixed list of countries, languages, departments, or categories stored in the application.
- **Product and service selection** Help users find an item quickly in a predefined catalog or service list.
- **Remote directories** Search customer, employee, or location records loaded from a remote data source.
- **Large or frequently updated datasets** Retrieve matching options remotely when loading and filtering the complete dataset in the browser is impractical.
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/javascript/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/select/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/javascript/select/api#opt-display) - option
- [`data`](https://mobiscroll.com/docs/javascript/select/api#opt-data) - option
- [`filter`](https://mobiscroll.com/docs/javascript/select/api#opt-filter) - option
- [`onFilter`](https://mobiscroll.com/docs/javascript/select/api#event-onFilter) - event
- [`setOptions`](https://mobiscroll.com/docs/javascript/select/api#method-setOptions) - method
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
var 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,
},
];
mobiscroll.select('#demo-local-data', {
display: 'anchored',
data: names,
filter: true,
});
var inst = mobiscroll.select('#demo-remote-data', {
display: 'anchored',
filter: true,
data: [],
onFilter: function (ev) {
remoteFiltering(ev.filterText);
return false;
},
});
function remoteFiltering(filterText) {
mobiscroll.getJson(
'https://trial.mobiscroll.com/airports/' + encodeURIComponent(filterText),
function (data) {
var item;
var airports = [];
for (var i = 0; i < data.length; i++) {
item = data[i];
airports.push({ text: item.name, value: item.code });
}
inst.setOptions({ data: airports });
},
'jsonp',
);
}
remoteFiltering('');
```
### HTML
```html
```
## Implementation notes
- `filter: true` turns on the search box in the picker header for both `Select` instances shown in this demo.
- **Local filtering** (left picker): `data` is a static in-memory array of `{ text, value }` objects; with only `filter: true` set and no filter handler, the component filters that array client-side by matching `text` against the typed query - no extra wiring is needed.
- **Remote filtering** (right picker): an `onFilter` handler intercepts the built-in filtering and returns `false` to suppress it, then issues its own request - `getJson('https://trial.mobiscroll.com/airports/' + encodeURIComponent(filterText), callback, 'jsonp')` in JS/React/Vue, or `HttpClient.jsonp(...)` in Angular - and repopulates the bound `data` array/ref from the response (`{ text: item.name, value: item.code }` per record) once results arrive.
- `onFilter`'s handler receives an event object exposing `filterText` (the current search-box value); returning `false` from the handler is what stops the component from also running its own client-side match against `data`.
- The remote example also calls the same fetch-and-populate function once on mount/init with an empty `filterText` so the picker has an initial option list before the user types anything.
- Event wiring differs per framework: React passes `onFilter` as a prop callback on `