Skip to main content
Version: 5.33.0

Filtering

Filtering can be turned on with the filter option. It is very usefull when using large datasets and you want to find a particular item.

When filtering is on, a filter input is rendered above the selectable options. The placeholder of the input can be customized and localized with the filterPlaceholderText option. Typing a text in the input filters the options you can choose from. Also, with each change on the filter input text, the onFilter event is triggered.

When no items match the filter the Mobiscroll Select will show a "No results" message, that can be customized and localized with the filterEmptyText option.

Local Filtering​

By defaut filtering is done client side on the dataset passed to the Select with the data option. The filter text is searched in the option items text property and if there is a match the item stays in the list - otherwise it's hidden.

import { useState } from 'react';
import { Select } from '@mobiscroll/react';

function App() {
  const [countries] = useState([
    { text: 'US - United States', value: 3 },
    { text: 'DE - Germany', value: 19 },
    { text: 'HU - Hungary', value: 93 },
    // ... long list of 195 countries
    { text: 'ZW - Zimbabwe', values: 73 },
  ]);

  return <Select data={countries} filter={true} />
}

Remote Filtering​

Server side filtering can be implemented with the help of the onFilter event and using the data option dynamically. Returning false from the onFilter event handler will prevent the filtering of the option items locally. Then, a request can be made to the server with the filterText and the returned data can be set to the Select dynamically.

import { useState } from 'react';
import { Select } from '@mobiscroll/select';
import { myCreateARequestMethod } from 'any-library-i-want';

function App() {
  const [data, setData] = useState([]);

  const myFilter = (args) => {
    const text = args.filterText;
    // create a request here and set the results to the data
    myCreateARequestMethod(text)
      .then((filteredArray) => {
        // this is probably an async operation
        setData(filteredArray);
      });

    // this is synchronous
    return false;
  }

  return <Select data={data} filter={true} onFilter={myFilter} />
}
info

In the above example, we did not specify any library to handle the remote calls on purpose.

If you need a library to handle http requests, check out Axios. It's a very popular library.