Select Fuzzy

import {SelectFuzzy} from '@/demos/SelectFuzzy.demo'; import { Layout } from '@/layout';

export const meta = { title: 'How can I add fuzzy search to Select component?', description: 'Learn how to integrate third-party fuzzy search libraries with Mantine Select component', slug: 'select-fuzzy', category: 'components', tags: ['select', 'multi-select', 'autocomplete', 'tags-input'], created_at: 'December 7, 2024', last_updated_at: 'December 7, 2024', };

export default Layout(meta);

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 with a custom filter function that matches options by words instead of a letter 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

An example of adding fuzzy search with fuse.js to the Select component: