Jak filtrować wyniki wyszukiwania podczas pisania w React

Jak filtrować wyniki wyszukiwania podczas pisania w React

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 użytkownicy.





Możesz użyć Reacta do zbudowania paska wyszukiwania, który filtruje i wyświetla dane jako typy użytkowników. Dzięki zaczepom React oraz metodom map JavaScript i tablicy filtrów efektem końcowym jest responsywne, funkcjonalne pole wyszukiwania.



MAKEUSEOF WIDEO DNIA

Wyszukiwanie przyjmie dane wejściowe 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 create-react-app search-bar

w App.js plik, dodaj element formularza, w tym tag input:



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

Powinieneś użyć useState Reaguj hak i onChange zdarzenie do sterowania wejściem. Tak więc zaimportuj useState i zmodyfikuj dane wejściowe, aby używały wartości stanu:

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> 
    ) 
  }

Za każdym razem, gdy użytkownik wpisuje coś w elemencie input, uchwytZmień aktualizuje stan.



Filtrowanie danych po zmianie danych wejściowych

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

Najpierw zmodyfikuj stan, aby uwzględnić dane:



jak wyodrębnić czysty głos z zaszumionego pliku audio 
const [state, setstate] = useState({ 
  query: '', 
  list: [] 
})

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

Filtrowane dane mogą być dowolnymi danymi, na których chcesz przeprowadzić wyszukiwanie. Na przykład możesz utworzyć listę przykładowych postów na blogu, taką jak ta:

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 
  ]

Możesz także pobrać dane za pomocą API z CDN lub bazy danych.

Następnie zmodyfikuj funkcję handleChange(), aby filtrować dane za każdym razem, gdy użytkownik wpisze dane w danych wejściowych.

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 
    }) 
}

Funkcja zwraca posty bez przeszukiwania ich, jeśli zapytanie jest puste. Jeśli użytkownik wpisał zapytanie, sprawdza, czy tytuł posta zawiera tekst zapytania. Konwertowanie tytułu posta i zapytania na małe litery zapewnia, że ​​w porównaniu nie jest rozróżniana wielkość liter.

co oznaczają ikony komunikatora na Facebooku?

Gdy metoda filter zwróci wyniki, funkcja handleChange aktualizuje stan o tekst zapytania i przefiltrowane dane.

Wyświetlanie wyników wyszukiwania

Wyświetlanie wyników wyszukiwania polega na przechodzeniu przez tablicę list przy użyciu przycisku mapa metodę i wyświetlanie danych dla każdej pozycji.

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> 
  ) 
}

Wewnątrz znacznika ul komponent sprawdza, czy zapytanie jest puste. Jeśli tak, wyświetla pusty ciąg, 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 iteruje po wynikach wyszukiwania i wyświetla tytuły postów.

Możesz także dodać czek, który wyświetla pomocny komunikat, jeśli wyszukiwanie nie zwraca żadnych wyników.

<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>

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 reakcji 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 — title — w obiektach wewnątrz tablicy. Funkcjonalność wyszukiwania można ulepszyć, używając operatora logicznego OR w celu dopasowania zapytania do innych właściwości w obiekcie.