tbleckert / react-select-search

⚡️ Lightweight select component for React
https://react-select-search.com
MIT License
674 stars 149 forks source link

Search Does Not Filter Items #248

Open ztroop opened 1 year ago

ztroop commented 1 year ago

Using the latest version of react-select-search, I'm trying to use the "search" functionality as demonstrated here.

import SelectSearch from 'react-select-search'

const options = [
    {name: 'Swedish', value: 'sv'},
    {name: 'English', value: 'en'},
    {
        type: 'group',
        name: 'Group name',
        items: [
            {name: 'Spanish', value: 'es'},
        ]
    },
];

<SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" search />

What I get is a select menu that shows the options, lets me type in the bar, but doesn't filter as I would expect.

gregor-gh commented 1 year ago

I had the same problem, had to add a filterOption prop, it appears there isn't a default filtering function in the current version (don't know if there ever was).

import { fuzzySearch } from "react-select-search";

<SelectSearch filterOptions={fuzzySearch} ......... />

Though I wasn't happy with the default fuzzy search so I tweaked it to stop it sorting the list by fuzzyness and decrease the threshold ever so slightly

function fuzzySearch(options) {
  const fuse = new Fuse(options, {
    keys: ["name", "groupName", "items.name"],
    threshold: 0.2, // I was getting weird matches with the default 0.3
    shouldSort: false, // This was changing the sort of my list
  });
  return (value) => {
    if (!value.length) {
      return options;
    }

    return fuse.search(value).map((_ref) => {
      let { item } = _ref;
      return item;
    });
  };
}
karna41317 commented 1 year ago

export const countries = [
  {
    name: 'Europe',
    value: 'Europe',
    type: 'group',
    items: [
      { name: 'Sweden', code: 'Sweden', value: 'SE', disabled: true },
      { name: 'Denmark', code: 'Denmark', value: 'DK', disabled: true },
      { name: 'Estonia', code: 'Estonia', value: 'EE', disabled: true },
      { name: 'Norway', code: 'Norway', value: 'NO', disabled: true },
      { name: 'Finland', code: 'Finland', value: 'FI', disabled: true },
      { name: 'France', code: 'France', value: 'FR', disabled: true },
      { name: 'Germany', code: 'Germany', value: 'DE', disabled: true },
      { name: 'Netherlands', code: 'Netherlands', value: 'NL', disabled: true },
      { name: 'Latvia', code: 'Latvia', value: 'LV', disabled: true },
      { name: 'Lithuania', code: 'Lithuania', value: 'LT', disabled: true },
      { name: 'Luxembourg', code: 'Luxembourg', value: 'LU', disabled: true },
      { name: 'United Kingdom', code: 'UK', value: 'GB', disabled: true },
      { name: 'Poland', code: 'Poland', value: 'PL', disabled: true },
      { name: 'Ukraine', code: 'Ukraine', value: 'UA', disabled: true },
      { name: 'Ireland', code: 'Ireland', value: 'IE', disabled: true },
    ],
  },
  {
    name: 'Other',
    value: 'Other',
    type: 'group',
    items: [
      { name: 'China', code: 'China', value: 'CN', disabled: true },
      { name: 'Singapore', code: 'Singapore', value: 'SG', disabled: true },
      { name: 'Hong Kong', code: 'Hong Kong', value: 'HK', disabled: true },
      { name: 'Russian Federation', code: 'USSR', value: 'RU', disabled: true },
      { name: 'United States', code: 'USA', value: 'US', disabled: true },
      { name: 'Global', code: 'Global', value: 'xx', disabled: true },
    ],
  },
]

import { fuzzySearch } from "react-select-search";

this does not work, tried with above Fuse example, still no luck

Note: removing disabled option also not helpful

ztroop commented 1 year ago

@gregor-gh Your suggestion was correct. filterOptions was a prop I was unaware of, as it's not shown in the Storybook example usage. I think a documentation update would be ideal.