Фильтрация только автозаполнения материала с полем getOptionLabel

Question

в настоящее время работает с компонентом автозаполнения пользовательского интерфейса Google. это только фильтрация в поле опции «getOptionLabel», когда я что-то набираю в поле ввода. Тем не менее, я хочу, чтобы автозаполнение было отфильтровано по нескольким полям. согласно do c, я могу использовать CreateFilterOptions, чтобы добавить еще одно поле, или использовать сортировщик совпадений, чтобы он работал.

https://material-ui.com/components/autocomplete/#createfilteroptions -config-filteroptions

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

<Autocomplete filterOptions={filterOptions} />

в stringify, мне интересно, могу ли я вернуть весь объект вместо option.title

Пожалуйста, поправьте меня, если я делаю что-то не так.

Answer 1

Во-первых, multi-additional-filter, кажется, в настоящее время не поддерживается createFilterOptions.

• источником автозаполнения пользовательского интерфейса 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;
});

Мы видим, что он фактически фильтрует параметры по атрибутам, которые кодируются как принимающие только один для сравнения.

---

Решение

В качестве обходного пути, если нам не нужен matchFrom: 'start', мы можем просто go через него связать две строки. Обратите внимание, что у него есть потенциальные ошибки.

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

Попробуйте онлайн: https://stackblitz.com/edit/gwmqss

---

Мы также можем написать нашу собственную функцию createFilterOptions для автозаполнения реквизиты getOptionLabel, которые могут поддерживать multi-additional-filter с такими реквизитами, как matchFrom: 'start'.

• документ MUI API автозаполнения реквизитов

Если вы думаю, что это полезная функция, вы также можете начать выпуск.

• новый выпуск для MUI функция