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

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

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

Создание панели поиска

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

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

npx создавать-реагировать-приложение поиск-бар

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

экспортпо умолчаниюфункцияПриложение() {
возвращаться (
<див>
<форма>
<тип ввода="поиск"/>
</form>
</div>
 )
}

Вы должны использовать использование состояния

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

Импортировать { состояние использования } от "Реагировать"
экспортпо умолчаниюфункцияПриложение() {
 const [запрос, setquery] = useState ('')
константа handleChange = (e) => {
setquery(е.цель.ценить)
 }
возвращаться (
<див>
<форма>
<тип ввода="поиск" значение={запрос} onChange={handleChange}/>
</form>
</div>
 )
 }

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

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

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

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

константа [состояние, setstate] = useState({
 запрос: '',
список: []
})

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

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

константа сообщения = [
 { 
 URL: '',
 теги: ['реагировать', 'блог'],
 Название: 'Как создавать реакция поиск бар',
 },
 {
 URL:'',
 теги: ['узел','выражать'],
 заголовок: 'Как смоделировать данные API в узле',
 },
// больше данных здесь
 ]

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

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

константа handleChange = (e) => {
константа результаты = сообщения.фильтр (сообщение => {
 если (e.target.value "") ответные посты
возвращатьсяпочта.заголовок.toLowerCase().включает(е.цель.ценить.toLowerCase())
 })
 установить состояние ({
запрос: е.цель.ценить,
список: Результаты
 })
}

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

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

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

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

экспортпо умолчаниюфункцияПриложение() {
// функция состояния и handleChange()
возвращаться (
<див>
<форма>
<ввод onChange={handleChange} значение={state.query} тип="поиск"/>
</form>
<ул>
 {(состояние.запрос ''? "": state.list.map (сообщение => {
 возвращаться <ли ключ = {post.title}>{Заголовок поста}</li>
 }))}
</ul>
</div>
 )
}

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

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

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

<ул>
 {(состояние.запрос ''? "Нет сообщений, соответствующих запросу": !state.list.length? "Ваш запрос не дал результатов": state.list.map (сообщение => {
 возвращаться <ли ключ = {post.title}>{Заголовок поста}</li>
 }))}
</ul>

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

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

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

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