Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search Does Not Filter Items #248

Open
ztroop opened this issue Aug 19, 2022 · 3 comments
Open

Search Does Not Filter Items #248

ztroop opened this issue Aug 19, 2022 · 3 comments

Comments

@ztroop
Copy link

ztroop commented Aug 19, 2022

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
Copy link

gregor-gh commented Aug 24, 2022

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
Copy link

karna41317 commented Aug 29, 2022


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
Copy link
Author

ztroop commented Sep 6, 2022

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants