Filtering isn't working correctly when you type the letter 'A'

[rcookerly]

First of all, thanks so much for react-search-autocomplete! It works great except when I type the letter 'A'. I have 8 products in my database that start with 'A'. I have maxResults set to 5. Yet I'm only getting 3 products that start with 'A'. I'm getting one that starts with 'J' and one that starts with 'S'. A small bug somewhere. Anyways, no biggie...just wanted to let you know.

[PyiTheinKyaw]

I face some kinda of issues, I have two products with 'ST1' and 'ST2' id. When I search by products id like 'ST1', It also show 'ST1' and also 'ST2'.

[sickdyd]

@rcookerly @PyiTheinKyaw This is probably related to the options that are passed to Fuse.js.

If not, could you provide an example on codesandbox to test out?

You can pass custom options to decide how results are found. Check out their docs.

This is how you pass it to ReactSearchAutocomplete:

fuseOptions, // To know more about fuse params, visit https://fusejs.io/ // // By default set to: // { // shouldSort: true, // threshold: 0.6, // location: 0, // distance: 100, // maxPatternLength: 32, // minMatchCharLength: 1, // keys: [ // "name", // ] // } // // keys represent the keys in items where the search will be // performed. // // Imagine for example that I want to search in items by title // and description in the following items, and display the title; // this is how to do it: // // const items = [ // { // id: 0, // title: 'Titanic', // description: 'A movie about love' // }, // { // id: 1, // title: 'Dead Poets Society', // description: 'A movie about poetry and the meaning of life' // } // ] // // I can pass the fuseOptions prop as follows: // // <ReactSearchAutocomplete // items={items} // fuseOptions={{ keys: ["title", "description"] }} // // necessary, otherwise the results will be blank // resultStringKeyName="title" // /> //

[rcookerly]

@sickdyd,

Thanks for the info. I'm finished with my school project, so I'm not too worried about it anymore. If I were to guess, the bug is not on Fuse's end though. Worked perfectly for every letter except 'A'. Just thought I'd let you know. Appreciate the response.

[sickdyd]

@rcookerly Hello! If you don't mind could you give me an example of the list you were using in your project for testing?

I tried using this list and it worked just fine 🤔

Thanks!

  const items = [
    {
      id: 0,
      name: "Alice",
    },
    {
      id: 1,
      name: "Alcova",
    },
    {
      id: 2,
      name: "Almanacco",
    },
    {
      id: 3,
      name: "Albania",
    },
    {
      id: 4,
      name: "Aruba",
    },
  ];

[rcookerly]

Here is a sample of our products in our database.

[ggogel]

I'm facing the same issue. Let's say I have two items: Alexander and Alexandra. When I search for Alexandra it also shows Alexander. Of course, the rating of Alexandra is higher but it should not show Alexander at all. It seems like it is not searching for consecutive strings but rather matching each character individually. The search result with the most matches will be on top. Though, this will show many unexpected results. For instance, it would show Calendar. Is this a bug or is there a parameter to change the search behavior in such a way that it is searching for matches of consecutive strings?

[ggogel]

Never mind, I've set the threshold value to 0.2, and the results are less fuzzy.

[sickdyd]

@rcookerly Thanks for the list, a textual version would be a bit more helpful though!

If I were to guess, the bug is not on Fuse's end though.

About this, did you actually check that Fuse works as you expect (when using the same settings of RSA)?

As @ggogel's post suggests, I think it's all about the way Fuse handles the results. I just pass the string and the items to Fuse and show the results that it returns, I don't manually filter items myself.

[rcookerly]

@sickdyd, Honestly...no, I didn't check that. I'm still in school, so I'm really new to web development. I'm sure I probably did something wrong. It was just weird that every letter worked perfectly, except words that started with the letter 'A'. I appreciate you trying to help! It was a small 2-week project that I was working on and done with it now.

[sickdyd]

I'll close this for now!