Material Ui Autocomplete - Filtering options is not working as expected

Question

I have Autocomplete where I pass an array of fetched and predefined options... https://codesandbox.io/s/geocoding-demo-forked-2f189?file=/src/App.js

When I type e.g. "Diestsestraat Leuven" it doesn't display any options, but when I console.log it I see array of options.

• I fixed this with this answer - https://mcmap.net/q/1322848/-autocomplete-not-rendering-as-expected-material-ui (I added - filterOptions={(options) => options} and it displays list of options...)

But then it doesn't filter out predefined options (see screenshot)

Any suggestions?

Kosey

Answer 1

In my case, I tried adding key to renderOption solutions. Reference: here

 <Autocomplete
        ...
          renderOption={(props, item) => (
                  <li {...props} key={item.key}>
                    <ListItemText>{item.label}</ListItemText>
                  </li>
        )
  />

Quintuplet

Thank you so much! Helped my a lot today with you Link:) Maybe try to reformat your code so that it is readable 👍🏼 – Eberto

"key" was the solution thank you 🙏 – Chipper

This was super helpful. In my case, I didn't even need to use render-option earlier. After reading the reply & the link, I simply used render-option with key, and the displayed options were filtered accurately. Awesome ! – Standpoint

Answer 2

You can use filterOptions prop in Autocomplete component. It gives you 2 parameter. First one is the options you've given to it and second one is the state of the input component. So you can customize it with your own filterize:

const filterOptions = (options, state) => {
    let newOptions = [];
    options.forEach((element) => {
      if (
        element.place_name
          .replace(",", "")
          .toLowerCase()
          .includes(state.inputValue.toLowerCase())
      )
        newOptions.push(element);
    });
    return newOptions;
  };

Mythopoeia

Here is a search term to check - Diestsestraat Leuven – Kosey

@Nikita Updated answer. Please check. It was because options has , in the term which you need to remove it for your purpose! – Mythopoeia

Not sure it’s the best solution - .replace(",", "").... – Kosey

@Nikita So you need to achieve your aim with this term : Diestsestraat, Leuven! – Mythopoeia

Please check out this link : https://appdividend.com/2020/08/01/javascript-remove-character-from-string-example/. replace is one of the solutions to remove a character from string. – Mythopoeia

@Nikita Because you're filtering a list of strings with a string which you would like to filter it event it has , character, so you need to remove it from the string to filter. – Mythopoeia

Answer 3

So on the filterOptions you are only returning options where you should be filtering. You could try adding:

filterOptions={(options) =>
  options.filter(({ place_name }) => place_name.includes(query))
}

Airboat

When you type - “Diestsestraat Leuven” - it doesn't display any options, but when I console.log it I see array of options. – Kosey

I provided link to the playground, so you can see yourself... – Kosey

The only option that is available is Diestsestraat, Leuven - notice the ,. – Airboat

Answer 4

 renderOption={(props, item) => (
            <li {...props} key={item.key}>
                    {item.name}     
            </li>           
    )}


replace item.name with your render values

Apocrine

did not work for me – Noteworthy

Answer 5

I had an issue fetching data from the server and couldn't see the exact options. (I was calling API for a filter list of users and showing in autocomplete) after all I just added an option based on mui documentation.

filterOptions={(x) => x}

it will be mostly useful if your logic is fetching new options on each keystroke and using the current value of the textbox to filter on the server, you may want to consider throttling requests.

Boarhound