Fuzzy Search does not search under Groups

[yigitlevent]

As the title suggests, it does not. Per with example below, when I type "Display" to the search bar, it returns "Not found". It does, however, search group value fields.

To Reproduce

const options = [
    {
        type: "group",
        name: "Sans",
        value: "sans",
        items: [
            { name: "Display", value: "Display" },
            { name: "Helvetica", value: "Helvetica" },
            { name: "Playfair Display", value: "Playfair Display" }
        ],
    },
    {
        type: "group",
        name: "Serif",
        value: "serif",
        items: [
            { name: "Hallelujah", value: "Hallelujah" },
            { name: "Gloria Hallelujah", value: "Gloria Hallelujah" },
            { name: "VT323", value: "VT323" }
        ],
    },
];

const [selectedFonts, setSelectedFonts] = useState<string[]>([]);

<SelectSearch
    options={options} 
    search={true}
    filterOptions={fuzzySearch}
    emptyMessage="Not found"
    multiple={true}
    closeOnSelect={false}
    printOptions="on-focus"
    placeholder="Choose Fonts"
    onChange={setSelectedFonts as any} 
/>

Expected behavior Search should also search under the group items.

Screenshots Before search: After search:

Desktop:

• OS: Windows 10
• Browser: Firefox
• Version: 87.0

Additional context Add any other context about the problem here.

[icaroscherma]

As you're using the fuzzySearch premade function, you should note under the Documentation (README.md) -> Configuration -> Filter Options -> "FuzzySearch.js for example" it's only looking for the keys name and groupName, as you need under your items.name, you need to write your own function. ;)

To check how to properly configure the fuzzySearch, I would recommend you looking at their own Docs.

This should do. ;)

filterOptions={(options) => {
  const fuse = new Fuse(options, {
    keys: ["name", "value", "items.name"],
    threshold: 0.3
  });

  return (value) => {
    if (!value.length) {
      return options;
    }

    return fuse.search(value);
  };
}}

Example working for you: https://codesandbox.io/s/select-search-3-custom-fuzzy-9d18d

[yigitlevent]

Ah. I thought built-in function actually worked with groups too, my bad. Thank you for the reply.

[icaroscherma]

I've message @tbleckert this morning once I figured that it might be a good idea to include items.name, items.value, so in future versions you might get away with default fuzzySearch. =)

I'm happy to help. =)

[tbleckert]

@icaroscherma Sweet work around!

And yes @yigitlevent , the built-in function should work with nested items as well. Seems something broke on the latest major release. Will take a look. Thanks for the report, appreciated!

[tbleckert]

Fixed and published as v3.0.6

[rjworks]

Help

Fixed and published as v3.0.6

the fuzzy search is not working

[rjworks]

    const [value, setValue] = useState("");
    const options = [];
    courses.map((course, i) => {
        if(!course.subjectCode.includes("*")) {
            options.push({
                name: course.subjectCode,
                type: 'group',
                items: [
                    {
                        name: course.subjectTitle,
                        value: course.subjectTitle
                    }
                ]
            })
        }
    })

    console.log(options)

the contents of options. it has 51 contents and this is one of them
0:
items: Array(1)
0: {name: "Anthropology", value: "Anthropology"}
length: 1
__proto__: Array(0)
name: "ANTH"
type: "group"
__proto__: Object

              <SelectSearch
                    options={options}
                    value={value}
                    onChange={setValue}
                    search
                    emptyMessage="Not found"
                    placeholder="Try CC 111"
                    printOptions="always"
                    autoFocus={false}
                    filterOptions={fuzzySearch}
                />

    function fuzzySearch(options) {
        const fuse = new Fuse(options, {
            keys: ['name', 'groupName', 'items.name'],
            threshold: 0.3,
        });

        return (value) => {
            if (!value.length) {
                return options;
            }

            return fuse.search(value);
        };
    }

Then I type something

[rjworks]

actually the results are empty invisible

[ziyafenn]

@rjworks npm install fuse.js@3

[rjworks]

npm install fuse.js@3

Thanks man! It works

[rjworks]

Is there a scroll to the top when the user enters something in the search bar?