React-Select Multi Searchable: НЕ позволяет мне искать по разделенным буквам или фрагментам слов

ПРОБЛЕМА

Привет, ребята, пожалуйста, помогите мне решить эту проблему. Я начал создавать приложение REACT, работающее с некоторыми данными JSON, и теперь я застрял на этой проблеме, пытаясь нажать несколько букв или фрагменты слов для поиска вариантов из выбора, которые могут содержать эту букву или эти фрагменты.

Проверьте пример и мой код ниже, у меня есть только один список, хранящийся в компоненте реагировать-выбрать, я использую response v15.6.2, react-dom v15.6.2 и response-select 2.1.0. Заранее спасибо.

Example: If I tap letter 'a', the search works fine and it gives me the options that contain that letter but when I add something else that is NOT exactly before/after the letter 'a', example: I add a letter 'b' that can be at the last of the option value, the select stops giving results!

const selectObjects = (<Select
  isMulti
  options = {this.state.list.map(obj => {
    return {
      value: obj.id,
      label: obj.id + ' ' + obj.name
    };
  })}
  onChange = {this.handleChangeEventObj}
  value = {this.state.list}
/>);

НАЖМИТЕ ЗДЕСЬ, ЧТОБЫ ПРОВЕРИТЬ ДЕМО

Вы можете показать нам код? Если вы используете функцию настраиваемого фильтра, это может быть проблемой (по умолчанию поиск выполняется в любом месте метки). Также вы можете использовать реквизиты getOptionValue и getOptionLabel для сопоставления вашего значения / метки, а не делать это непосредственно в options.

— 26.10.2018 18:41

Спасибо @ Steve-Cutter-Blades, но я пока не использую никаких пользовательских фильтров, ни getOptionValue, ни getOptionLabel, как работать с этими вещами, не могли бы вы мне помочь? заранее спасибо?

— 26.10.2018 18:56

getOptionValue = {(opt) => opt.id} и getOptionLabel = {(opt) => opt.id + ' ' + opt.name}

— 26.10.2018 20:21

json reactjs rest react-select react-dom

26.10.2018 18:06

Как сделать HTTP-запрос в Javascript?

В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:

1 589

Ответы 1

Я убедился, что если вы правильно сопоставите метку параметра и значение, проблема с поиском должна быть решена.

const options = [{
  id: 2,
  artist: 'Hendrix, Jimi',
  title: 'Red House'
}, {
  id: 3,
  artist: 'Clapton, Eric',
  title: `I'm Tore Down`
}];

<Select options = {options}
        getOptionValue = {(opt) => opt.id}
        getOptionLabel = {(opt) => `${opt.artist}: ${opt.title}`} />

У меня более крупный пример в этом коде.

Привет еще раз, я понял, что у тебя такая же проблема, как и у меня! Я перешел по ссылке, которую вы дали здесь, и попробовал свой Select, и я получил тот же результат, что и мой, когда я ищу слово «фантазия», например, с буквой «f», а затем я добавляю что-то, связанное с некоторыми следующими словами, select перестань давать результаты! Кроме того, в вашем коде нет функции фильтрации.

— 27.10.2018 12:26

да, функция поиска ищет совпадающие символы (т.е. e cr вернет опцию Ice Cream). Для чего-то более продвинутого потребуется настраиваемая функция фильтра, которую вы можете сделать, передав опору filterOption.

— 29.10.2018 13:14

Нет, мой друг, ваш выбор не решает мою проблему, он не работает с фрагментами, вы можете увидеть, хотите ли вы, на codeandbox.

— 29.10.2018 13:47

Вам нужно будет точно сказать мне, что вы пытаетесь ввести, что, по вашему мнению, не работает, и какой результат вы ожидали, потому что в моем коде и окне (сверху) он делает именно то, что я думал, что он должен делать. Например, если я набираю s th, он, как и ожидалось, фильтруется до Fantasy: Dreams That Money Can Buy.

— 29.10.2018 14:00

да, потому что это выражение "s th" индекс является 15-м, найденным в опции и не рассматривается как 2 отдельных фрагмента. Все, что я хочу сделать, это выполнить поиск по некоторым отдельным ключевым словам в этой опции, например, если у меня есть опция с этим значением: «Fanatasy dream 08», если я нажму «F», затем «Dream», что будет Показанный как "fdream" дает мне результат "Fanatasy dream 08". Я хочу, чтобы поиск обнаруживал буквы всех слов из всех индексов в выбранном! это все

— 29.10.2018 14:42

Тогда да, фильтрация по умолчанию работает не так, и вам нужно будет написать собственный метод фильтрации, который вы примените с опорой filterOption, как я упоминал выше.

— 29.10.2018 15:09

Не могли бы вы привести примеры того, как создать такой собственный метод?

— 29.10.2018 15:34

Я не могу привести пример, который бы соответствовал вашим потребностям, но они предоставляют пример того, как настроить пользовательские фильтры в документации, как второй пример на этой странице react-select.com/advanced

— 29.10.2018 15:38

Я уже перешел по этой ссылке и не нашел ни одного примера, который бы соответствовал моим потребностям, поэтому я делюсь здесь своей проблемой!

— 29.10.2018 15:42

ААА, хорошо. Я обновил свой codeandbox, чтобы использовать собственный filterOption. Это очень просто - проверить, начинается ли опция с вставленного inputValue. Из моего примера следует отметить две вещи. Во-первых, он чувствителен к регистру (нет флагов в RegExp). Во-вторых, он тестирует option.label, который я перекрыл своим свойством getOptionLabel.

— 29.10.2018 16:05

Итак, используя этот пример в качестве шаблона для написания собственного настраиваемого фильтра, теперь вы можете написать свою собственную логику сопоставления параметров для фильтрации вашего набора параметров. Фильтр запускается для каждой опции в вашем массиве options и покажет только те, для которых ваш фильтр возвращает true.

— 29.10.2018 16:07

26.10.2018 20:34