How can I add fuzzy search to Select component?

Last updated December 7, 2024

Options filtering

Select and other components based on Combobox component support custom options filtering with filter prop. You can use it to integrate third-party fuzzy search libraries like fuse.js or customize filtering logic to better suit your needs.

Example of a custom filter function that matches options by words instead of letters sequence:

import { Select, ComboboxItem, OptionsFilter } from '@mantine/core';

const optionsFilter: OptionsFilter = ({ options, search }) => {
  const splittedSearch = search.toLowerCase().trim().split(' ');
  return (options as ComboboxItem[]).filter((option) => {
    const words = option.label.toLowerCase().trim().split(' ');
    return splittedSearch.every((searchWord) => words.some((word) => word.includes(searchWord)));
  });
};

function Demo() {
  return (
    <Select
      label="Your country"
      placeholder="Pick value"
      data={['Great Britain', 'Russian Federation', 'United States']}
      filter={optionsFilter}
      searchable
    />
  );
}

Example with fuse.js

Example of adding fuzzy search with fuse.js to Select component:

Your country

import Fuse from 'fuse.js';
import { Select } from '@mantine/core';
import { data } from './data.json';

function Demo() {
  return (
    <Select
      label="Your country"
      placeholder="Select country"
      searchable
      data={data}
      filter={({ options, search }) => {
        const fuse = new Fuse(options, { keys: ['label', 'value'] });
        return search ? fuse.search(search).map((item) => item.item) : options;
      }}
    />
  );
}