Как фильтровать результаты поиска при наборе текста с помощью React

Как фильтровать результаты поиска при наборе текста с помощью React

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





Вы можете использовать React для создания панели поиска, которая фильтрует и отображает данные по мере ввода пользователем. Благодаря хукам React и методам отображения и массива фильтров JavaScript конечным результатом является отзывчивое функциональное окно поиска.



СДЕЛАТЬ ВИДЕО ДНЯ

Поиск будет принимать данные от пользователя и запускать функцию фильтрации. Вы можете используйте библиотеку, например Formik, для создания форм в React , но вы также можете создать панель поиска с нуля.





Если у вас нет проекта React и вы хотите продолжить, создайте его с помощью команды create-react-app.

когда вышел Xbox One 
npx create-react-app search-bar

в App.js файл, добавьте элемент формы, включая тег ввода:



export default function App() { 
   return ( 
    <div> 
        <form> 
          <input type="search"/> 
        </form> 
    </div> 
  ) 
}

Вы должны использовать использование состояния Реагировать крючок и по изменению событие для управления вводом. Итак, импортируйте useState и измените ввод, чтобы использовать значение состояния:

import { useState } from "React" 
export default function App() { 
     const [query, setquery] = useState('') 
     const handleChange = (e) => { 
       setquery(e.target.value) 
     } 
     return ( 
      <div> 
          <form> 
            <input type="search" value={query} onChange={handleChange}/> 
          </form> 
      </div> 
    ) 
  }

Каждый раз, когда пользователь вводит что-то внутри элемента ввода, ручка изменения обновляет состояние.



Фильтрация данных об изменении ввода

Панель поиска должна инициировать поиск с использованием запроса, который вводит пользователь. Это означает, что вы должны фильтровать данные внутри функции handleChange. Вы также должны отслеживать отфильтрованные данные в состоянии.

Сначала измените состояние, чтобы включить данные:



const [state, setstate] = useState({ 
  query: '', 
  list: [] 
})

Такое объединение значений состояния вместо создания одного для каждого значения сокращает количество рендеров, повышая производительность.

как сделать антенну своими руками

Данные, которые вы фильтруете, могут быть любыми, по которым вы хотите выполнить поиск. Например, вы можете создать список примеров сообщений в блоге, подобных этому:

const posts = [ 
    {   
      url: '', 
      tags: ['react', 'blog'], 
      title: 'How to create a react search bar', 
    }, 
    { 
      url:'', 
      tags: ['node','express'], 
      title: 'How to mock api data in Node', 
    }, 
    // more data here 
  ]

Вы также можете получить данные с помощью API из CDN или базы данных.

Затем измените функцию handleChange(), чтобы фильтровать данные всякий раз, когда пользователь вводит данные внутри ввода.

const handleChange = (e) => { 
    const results = posts.filter(post => { 
        if (e.target.value === "") return posts 
        return post.title.toLowerCase().includes(e.target.value.toLowerCase()) 
    }) 
    setstate({ 
        query: e.target.value, 
        list: results 
    }) 
}

Функция возвращает сообщения без поиска по ним, если запрос пуст. Если пользователь ввел запрос, он проверяет, содержит ли заголовок сообщения текст запроса. Преобразование заголовка сообщения и запроса в нижний регистр гарантирует, что сравнение будет нечувствительным к регистру.

Как только метод фильтра возвращает результаты, функция handleChange обновляет состояние текстом запроса и отфильтрованными данными.

Отображение результатов поиска

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

export default function App() { 
// state and handleChange() function 
   return ( 
    <div> 
        <form> 
          <input onChange={handleChange} value={state.query} type="search"/> 
        </form> 
        <ul> 
          {(state.query === '' ? "" : state.list.map(post => { 
            return <li key={post.title}>{post.title}</li> 
          }))} 
        </ul> 
    </div> 
  ) 
}

Внутри тега ul компонент проверяет, является ли запрос пустым. Если это так, он отображает пустую строку, потому что это означает, что пользователь ничего не искал. Если вы хотите выполнить поиск в списке уже отображаемых элементов, снимите этот флажок.

Если запрос не пустой, метод карты выполняет итерацию по результатам поиска и перечисляет заголовки сообщений.

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

что означают значки facebook messenger 
<ul> 
  {(state.query === '' ? "No posts match the query" : !state.list.length ? "Your query did not return any results" : state.list.map(post => { 
    return <li key={post.title}>{post.title}</li> 
  }))} 
</ul>

Добавление этого сообщения улучшит взаимодействие с пользователем, поскольку пользователь не будет смотреть на пустое место.

Обработка нескольких параметров поиска

Вы можете использовать состояние и перехватчики React вместе с событиями JavaScript для создания пользовательского элемента поиска, который фильтрует массив данных.

Функция фильтра проверяет только соответствие запроса одному свойству — заголовку — в объектах внутри массива. Вы можете улучшить функциональность поиска, используя логический оператор ИЛИ, чтобы сопоставить запрос с другими свойствами в объекте.