Paski wyszukiwania to świetny sposób, aby pomóc użytkownikom znaleźć to, czego potrzebują w Twojej witrynie. Są również dobre do analiz, jeśli śledzisz, czego szukają Twoi goście.

Możesz użyć React do zbudowania paska wyszukiwania, który filtruje i wyświetla dane według typów użytkowników. Dzięki hakom React oraz metodom JavaScript map i filter array efektem końcowym jest responsywne, funkcjonalne pole wyszukiwania.

Tworzenie paska wyszukiwania

Wyszukiwanie pobierze dane od użytkownika i uruchomi funkcję filtrowania. Możesz użyj biblioteki takiej jak Formik do tworzenia formularzy w React, ale możesz też utworzyć pasek wyszukiwania od podstaw.

Jeśli nie masz projektu React i chcesz kontynuować, utwórz go za pomocą polecenia create-react-app.

npx tworzyć-reaguj-aplikacja szukaj-bar

w Aplikacja.js plik, dodaj element formularza, w tym tag wejściowy:

eksportdomyślnyfunkcjonowaćAplikacja() {
powrót (
<dz>
<formularz>
<typ wejścia="szukaj"/>
</form>
</div>
 )
}

Powinieneś użyć tzw stan użyciaHak reakcji i

naZmień zdarzenie sterujące wejściem. Więc zaimportuj useState i zmodyfikuj dane wejściowe, aby używały wartości stanu:

import { stan użycia } z "Reagować"
eksportdomyślnyfunkcjonowaćAplikacja() {
 const [zapytanie, ustawione zapytanie] = useState('')
konst handleChange = (e) => {
zapytanie(mi.cel.wartość)
 }
powrót (
<dz>
<formularz>
<typ wejścia="szukaj" value={zapytanie} onChange={handleChange}/>
</form>
</div>
 )
 }

Za każdym razem, gdy użytkownik wpisze coś w elemencie wejściowym, uchwytZmień aktualizuje stan.

Filtrowanie danych o zmianie danych wejściowych

Pasek wyszukiwania powinien uruchamiać wyszukiwanie przy użyciu zapytania podanego przez użytkownika. Oznacza to, że powinieneś filtrować dane wewnątrz funkcji handleChange. Powinieneś także śledzić filtrowane dane w stanie.

Najpierw zmodyfikuj stan, aby zawierał dane:

konst [stan, ustaw stan] = użyjStan({
 zapytanie: '',
lista: []
})

Łączenie wartości stanu w ten sposób, zamiast tworzenia jednej dla każdej wartości, zmniejsza liczbę renderowań, poprawiając wydajność.

Dane, które filtrujesz, mogą być dowolnymi danymi, które chcesz wyszukać. Na przykład możesz utworzyć listę przykładowych postów na blogu, takich jak ten:

konst posty = [
 { 
 Adres URL: '',
 tagi: ['reagować', 'blog'],
 tytuł: „Jak tworzyć zareagować szukaj bar',
 },
 {
 Adres URL:'',
 tagi: ['węzeł','wyrazić'],
 tytuł: 'Jak kpić z danych API w Node',
 },
// więcej danych tutaj
 ]

Możesz również pobrać dane za pomocą interfejsu API z CDN lub bazy danych.

Następnie zmodyfikuj funkcję handleChange() w celu filtrowania danych za każdym razem, gdy użytkownik wpisze dane wejściowe.

konst handleChange = (e) => {
konst wyniki = posty. filtr (post => {
 if (e.docelowa.wartość "") zwrotne posty
powrótpost.tytuł.na małe litery().zawiera(mi.cel.wartość.na małe litery())
 })
 ustaw stan({
zapytanie: mi.cel.wartość,
lista: wyniki
 })
}

Funkcja zwraca posty bez ich przeszukiwania, jeśli zapytanie jest puste. Jeśli użytkownik wpisał zapytanie, sprawdza, czy tytuł postu zawiera tekst zapytania. Konwersja tytułu posta i zapytania na małe litery zapewnia, że ​​porównanie nie uwzględnia wielkości liter.

Gdy metoda filter zwróci wyniki, funkcja handleChange aktualizuje stan za pomocą tekstu zapytania i przefiltrowanych danych.

Wyświetlanie wyników wyszukiwania

Wyświetlenie wyników wyszukiwania obejmuje zapętlenie tablicy list przy użyciu metody mapa metodę i wyświetlanie danych dla każdej pozycji.

eksportdomyślnyfunkcjonowaćAplikacja() {
// stan i funkcja handleChange().
powrót (
<dz>
<formularz>
<wpisz onChange={handleChange} value={state.query} type="szukaj"/>
</form>
<ul>
 {(stan.zapytanie ''? "": state.list.map (post => {
 powrót <li key={post.title}>{post.tytuł}</li>
 }))}
</ul>
</div>
 )
}

Wewnątrz znacznika ul komponent sprawdza, czy zapytanie jest puste. Jeśli tak, wyświetla pusty ciąg znaków, ponieważ oznacza to, że użytkownik niczego nie szukał. Jeśli chcesz przeszukać listę elementów, które już wyświetlasz, usuń to zaznaczenie.

Jeśli zapytanie nie jest puste, metoda map przegląda wyniki wyszukiwania i wyświetla tytuły postów.

Możesz także dodać zaznaczenie, które wyświetli pomocny komunikat, jeśli wyszukiwanie nie zwróci żadnych wyników.

<ul>
 {(stan.zapytanie ''? "Brak wpisów pasujących do zapytania": !stan.lista.długość? "Twoje zapytanie nie zwróciło żadnych wyników": state.list.map (post => {
 powrót <li key={post.title}>{post.tytuł}</li>
 }))}
</ul>

Dodanie tej wiadomości poprawia wrażenia użytkownika, ponieważ użytkownik nie patrzy na puste miejsce.

Obsługa więcej niż jednego parametru wyszukiwania

Możesz użyć stanu React i hooków wraz ze zdarzeniami JavaScript, aby utworzyć niestandardowy element wyszukiwania, który filtruje tablicę danych.

Funkcja filtru sprawdza tylko, czy zapytanie pasuje do jednej właściwości — tytułu — w obiektach wewnątrz tablicy. Funkcjonalność wyszukiwania można udoskonalić, używając operatora logicznego OR w celu dopasowania zapytania do innych właściwości obiektu.