javascript - Material UI Autocomplete only filtering with getOptionLabel field - Stack Overflow

admin管理员组

文章数量:1341856

currently working with Material UI autoplete ponent. it is only filtering on the "getOptionLabel" option field when I type something on the input field. however, I want the autoplete to filter on more than one field. as per doc, I can use CreateFilterOptions to add one more field or use match-sorter to make it work.

const filterOptions = createFilterOptions({
  matchFrom: 'start',
  stringify: option => option.title,
});

<Autoplete filterOptions={filterOptions} />

at stringify, I am wondering if I could return the whole object instead of just an option.title

please correct me if I am doing something wrong.

currently working with Material UI autoplete ponent. it is only filtering on the "getOptionLabel" option field when I type something on the input field. however, I want the autoplete to filter on more than one field. as per doc, I can use CreateFilterOptions to add one more field or use match-sorter to make it work.

https://material-ui./ponents/autoplete/#createfilteroptions-config-filteroptions

const filterOptions = createFilterOptions({
  matchFrom: 'start',
  stringify: option => option.title,
});

<Autoplete filterOptions={filterOptions} />

at stringify, I am wondering if I could return the whole object instead of just an option.title

please correct me if I am doing something wrong.

• javascript
• reactjs
• autoplete
• material-ui
• react-hooks

Share Follow edited 23 hours ago Olivier Tassinari 8,69166 gold badges2525 silver badges2828 bronze badges asked Apr 17, 2020 at 15:53 dev0864dev0864 53522 gold badges77 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

First, multi-additional-filter seems currently not supported by createFilterOptions.

• source of Material-UI Autoplete createFilterOptions

const filteredOptions = options.filter(option => {
  let candidate = (stringify || getOptionLabel)(option);
  if (ignoreCase) {
    candidate = candidate.toLowerCase();
  }
  if (ignoreAccents) {
    candidate = stripDiacritics(candidate);
  }
  return matchFrom === "start"
    ? candidate.indexOf(input) === 0
    : candidate.indexOf(input) > -1;
});

We can see it actually filter the options via attributes, which is coded as only accepting one to pare.

---

Solution

As a workaround, if we don't need matchFrom: 'start', we can simply go through it via bind the two string. Notice it does have potential bugs.

const filterOptions = createFilterOptions({
  // matchFrom: 'start',
  stringify: (option) => option.title + option.text, // make it one for it
});

Try it online: https://stackblitz./edit/gwmqss

---

We can also write our own createFilterOptions function for Autoplete props getOptionLabel which can support multi-additional-filter with those props like matchFrom: 'start'.

• document of MUI Autoplete props API

If you think it's a valuable feature, you can start an issue, too.

• new issue for MUI feature

本文标签： javascriptMaterial UI Autocomplete only filtering with getOptionLabel fieldStack Overflow