Оптимизированный фильтр панели поиска в reactjs

Question

Я реализовал фильтр поиска в reactjs, но всякий раз, когда я добавляю пробел в строку, он также не показывает существующий продукт. Например: у меня есть такие значения: «Iphone подробности», «Телефон Samsung deatils». Если я введу «Iphone», я получу искомую строку как «Iphone подробности», но если я нажму «пробел» после «IPhone», я не получу "Iphone подробности", но результата не будет. Может ли кто-нибудь помочь мне в создании оптимизированного поиска для моего приложения React.

 const searchFilter = this.state.details.filter(
      (data) => {
        if (this.state.searchStr == null) return true;
        else if (
          data.name.includes(this.state.searchStr) ||
          data.title.includes(this.state.searchStr)
        ) {
          return data;
        }
      }
    );

Может ли кто-нибудь помочь мне с ошибкой в ​​коде.

Answer 1

При сравнении сохраненных значений и значений, вводимых пользователем, рекомендуется максимально приблизить их к одному уровню. Это означает, что мы можем запустить поиск пользователя и значение элемента через несколько нормализаторов. Взгляните на следующий измененный код:

const searchFilter = this.state.details.filter(
      (data) => {
        if (this.state.searchStr == null) return true;
        else if (
          data.name.toLowerCase().trim().includes(this.state.searchStr.trim().toLowerCase()) ||
          data.title.toLowerCase().trim().includes(this.state.searchStr.trim().toLowerCase())
        ) {
          return data;
        }
      }
    );

Добавлены следующие функции:

.toLowerCase()
.trim()

Они нормализуют как ввод поиска, так и data.name и data. заголовок будет искать в нижнем регистре, а функция обрезки удаляет все пробелы для облегчения сравнения.