Заказать результаты поиска в react-select

При использовании response-select результаты поиска по умолчанию упорядочиваются в алфавитном порядке. Это хорошее значение по умолчанию, но не очень хорошее, если у меня есть точное совпадение, не первое по алфавиту. Например, у пользователя могут быть следующие возможности:

  • a_react
  • b_react
  • c_react
  • d_react
  • реагировать

С помощью этих параметров пользователь может искать «реагировать» и не приближаться к выбору варианта, который точно соответствует поисковому запросу. Есть ли способ оптимизировать для точных совпадений?


reactjs react-select
person Brady Dowling    schedule 24.07.2019    source источник
comment
вы можете передать свой собственный filterOption, чтобы изменить способ фильтрации   -  person John Ruddell    schedule 25.07.2019
comment
@JohnRuddell ах, хорошо, я искал документы для поиска и результатов, но ничего там не нашел, хорошая находка. Я нашел , but this example другие примеры полезны. Не стесняйтесь изменить это на ответ, чтобы я мог его принять.   -  person Brady Dowling    schedule 25.07.2019
comment
Похоже, что этот конкретный пример - именно то, что вам нужно! :) Напишу ответ по поводу filterOption, чтобы мы могли закрыть вопрос :)   -  person John Ruddell    schedule 25.07.2019

Ответы (3)


arrow_upward
6
arrow_downward

react-select имеет опору, если вы хотите иметь собственный фильтр - filterOption.

Если вы хотите, чтобы совпадения были лучше на основе запросов пользователя, используйте сортировщик совпадений в сочетании с onInputChange из react-select, чтобы создать собственный фильтр. Вот рабочая демонстрация.

Есть два входа выбора. Введите l и обратите внимание на разницу в предложениях.

person ron4ex    schedule 24.07.2019
comment
Если подумать, я не уверен, будет ли он работать с react-select. Я не нашел на Github примеров того, как эти двое хорошо играли вместе. - person Brady Dowling; 25.07.2019
comment
Я обновил свой ответ рабочей демонстрацией. Я должен был быть яснее. filterOption не имеет к этому никакого отношения. onInputChange и matchSorter могут быть объединены для этого. - person ron4ex; 25.07.2019
comment
Кажется нецелесообразным обходить указанную опору для этого filterOption. Кажется, что передача нового объекта параметров может нарушить встроенную оптимизацию. - person Slbox; 31.03.2021
comment
@Slbox Вы могли быть правы. Однако в react-select документах таких предупреждений нет. И поскольку onInputChange - это открытая опора, я просто рассматриваю ее как один более глубокий уровень настройки для тех, кто хочет получить дополнительный контроль над фильтрацией. - person ron4ex; 02.04.2021

arrow_upward
8
arrow_downward

В react-select вы можете передать свойство filterOption, чтобы изменить способ работы фильтрации. Они предоставляют хороший API, чтобы делать то, что вы хотите, то есть начинать сопоставление с начала строки, а не где-либо в строке. Это будет выглядеть примерно так

filterOption={createFilter({ matchFrom: "start" })}

где createFilter импортируется из react-select

person John Ruddell    schedule 24.07.2019
comment
Я использую это с CreatableSelect, и это не позволяет мне создавать новые параметры - person Sulman Azhar; 25.03.2021

arrow_upward
1
arrow_downward

У @ ron4ex есть отличный ответ. Просто хотел предложить другое подобное решение, так как у меня была одна большая проблема с сортировщиком совпадений.

Проблема с сортировщиком соответствий:

  • Мой список - это список семейных отношений, например мать, свекровь
  • Когда я начал печатать, сортировщик спичек отдавал предпочтение свекрови перед матерью. Только после полного совпадения приоритет будет отдан матери. Тем не менее, react-select сохранил фокусирующуюся опцию как свекровь.
  • Даже если бы я мог исправить проблему с фокусом по умолчанию, я бы предпочел не соответствовать матери, а не свекрови.

Введите новое решение: Fuse:

  • Реализация, аналогичная сортировщику совпадений
  • Нечеткий поиск с множеством параметров настройки
  • Конфигурация по умолчанию: мать по свекрови
const fuse = new Fuse(relationshipTypes, { keys: ["label"] });

<Select>
  onInputChange={inputValue => {
    setRelationshipOptions(
      fuse.search(inputValue).map(value => value.item)
    );
  }}
</Select>
  • обратите внимание на карту на fuse.search, поскольку fuse возвращает измененный массив с исходными значениями в ключе элемента и вторым ключом, являющимся индексом. Следовательно, fuse.search (). Map
person Sharud    schedule 22.08.2020