Kako dodati pretraživanje u React aplikaciju pomoću Fuse.js

Pretraživanje je moćan način koji pomaže ljudima koji posjete vašu stranicu da pronađu sadržaj koji im je najvažniji. Ali često je zaista izazov dokučiti pravila i logiku da se to dogodi. U ovom ćemo članku vidjeti kako možemo koristiti fuse.js za dodavanje pretraživanja u naše aplikacije.

  • Što je fuse.js?
  • Zašto je pretraga važna?
  • Što ćemo graditi?
  • Korak 0: Pokrenite našu aplikaciju
  • Korak 1: Instalacija Fuse.js
  • Korak 2: Stvaranje nove instance pretraživanja Fuse
  • Korak 3: Postavljanje dinamičkog pretraživanja na temelju korisničkog unosa

Što je fuse.js?

Fuse.js je JavaScript knjižnica koja pruža nejasne mogućnosti pretraživanja aplikacija i web stranica. Lijepo ga je i jednostavno koristiti, ali uključuje i opcije konfiguracije koje vam omogućuju podešavanje i stvaranje moćnih rješenja.

Zašto je pretraga važna?

Bez obzira jeste li kreator sadržaja ili pokušavate prodati proizvod na svojoj web stranici, važno je pomoći posjetiteljima da stvarno pronađu ono što traže.

Ako gradite web mjesto za e-trgovinu, želite da netko može lako pronaći vaše vinil figure Bendera, umjesto da prvo mora kopati po cijelom katalogu.

Što ćemo graditi?

Krenut ćemo s osnovnim primjerom Create React App. Uključit će neke informacije o likovima kao strukturirane podatke za jednu od mojih najdražih emisija Futurama koja je jednostavno izbačena na HTML popis.

S tim ćemo popisom koristiti fuse.js kako bismo pružili mogućnosti pretraživanja na strani klijenta, omogućujući nam da demonstriramo traženje lika kojeg tražimo po imenu i ostalim detaljima.

Korak 0: Pokrenite našu aplikaciju

Za početak trebat će nam sadržaj s kojim ćemo raditi. Počeo sam gradeći popis likova iz Futurame kao strukturirane json podatke koje sam stavio na popis sa svježom aplikacijom Create React.

Također ćete primijetiti da sam već dodao ulaz za našu pretragu. Još nije u funkciji, ali koristit ćemo to za početak.

Ako želite započeti na istom mjestu, stvorio sam poslovnicu s mojim demo repoom koju možete klonirati lokalno da prođete kroz projekt sa mnom!

git clone --single-branch --branch start [email protected]:colbyfayock/my-futurama-characters.git 

Git grana "start"

Ili slijedite objavu.

Korak 1: Instalacija Fuse.js

Prvo što ćemo htjeti je zapravo dodati Fuse.js u našu aplikaciju. U svom projektu pokrenite:

yarn add fuse.js # or npm install --save fuse.js 

Ovo će spasiti ovisnost o našem projektu, tako da ćemo je moći koristiti u našem projektu.

Dalje ćemo htjeti uvoziti ovisnost u našu aplikaciju kako bismo mogli početi graditi s njom. Na vrh datoteke, u našem slučaju, src/App.jsako pratite zajedno sa mnom u novom projektu Create React App, dodajte:

import Fuse from 'fuse.js'; 

Ako želite testirati da li radi, možete console.log(Fuse)vidjeti i našu Fuseklasu koju ćemo koristiti za stvaranje naših mogućnosti pretraživanja.

I time smo spremni za početak!

Slijedite uz predavanje

Korak 2: Stvaranje nove instance pretraživanja Fuse

Da bismo koristili Fuse.js, prvo ćemo ga htjeti stvoriti.

Na vrh komponente dodajte:

const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ] }); 

Uz ovo:

  • Stvara novu instancu osigurača
  • Prolazi u našem charactersnizu objekata
  • Određuje 3 tipke u našim podacima koje želimo pretraživati

Dalje, za obavljanje pretraživanja možemo dodati:

const results = fuse.search('bender'); 

A ako rezultate odjavimo iz konzole, možemo vidjeti:

Primijetit ćete da ipak imamo više rezultata od našeg prijatelja Bendera. Fuse.js nudi "mutno pretraživanje" što znači da vam pokušava pomoći u slučaju da niste sigurni što tražite ili ako pogrešno pišete svoj upit.

Da bismo dobili ideju o tome kako to funkcionira, dodajte includeScoreopciju u naše pretraživanje:

const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ], includeScore: true }); 

Sada scoreatribut možemo vidjeti u našem objektu rezultata.

Primijetit ćete da naš prvi rezultat ima stvarno nisku ocjenu. S fuse.js, niži rezultat znači da je bliži točnom podudaranju.

Rezultat 0 ukazuje na savršeno podudaranje, dok rezultat 1 ukazuje na potpuno nepodudaranje.

Kaže kako je nevjerojatno vjerojatno da je prvi rezultat ono što tražimo, ali nije siguran u ostale.

Dakle, našim rezultatima želimo to zapravo povezati s našim korisničkim sučeljem. Ako primijetite da se naš izlaz niza razlikuje od onoga što mapiramo za HTML popis, kreirajmo novu varijablu u koju ćemo je moći promijeniti:

const results = fuse.search('bender'); const characterResults = results.map(character => character.item); 

Ovo što radi je stvaranje novog polja pomoću metode map koji će sadržavati samo itemsvojstvo iz svakog objekta niza.

Zatim, ako zamijenimo našu characterskartu s popisa sa characterResults.map:

    {characterResults.map(character => { const { name, company, species, thumb } = character;

Sada možemo vidjeti da naša stranica prikazuje samo rezultate za "savijanje"!

Slijedite uz predavanje!

Korak 3: Postavljanje dinamičkog pretraživanja na temelju korisničkog unosa

Sada kada imamo kodirano pretraživanje, želimo da netko zaista može koristiti unos pretraživanja za pretraživanje!

Da bismo to postigli, upotrijebit ćemo useStatekuku i osluškivati ​​promjene na inputpolju, što će dinamički stvoriti potragu za našim podacima.

Prvo uvezite useStateudicu iz React-a:

import React, { useState } from 'react'; 

Dalje, upotrijebimo tu udicu za stvaranje instance države:

const [query, updateQuery] = useState(''); 

Ovdje stvaramo novo stanje querykoje možemo nadograditi updateQuerypraznim nizom ( '') pomoću zadanih vrijednosti .

Uz to, recimo našem pretraživanju da koristi tu queryvrijednost kao vrijednost:

U ovom trenutku ništa ne bi trebalo biti drugačije jer koristimo prazan upit.

Sada dodajmo obrađivač događaja u naš ulaz koji možemo koristiti za ažuriranje našeg stanja:

I mi ćemo htjeti stvoriti tu funkciju kako bismo je mogli koristiti:

function onSearch({ currentTarget }) { updateQuery(currentTarget.value); } 

Ovo će ažurirati našu queryvrijednost ulaza svaki put kad se promijeni.

Sad kad query  će naši imati ono što želimo tražiti, možemo ažurirati svoju instancu pretraživanja:

const results = fuse.search(query); 

A ako ponovo učitate stranicu, ona je prazna! ?

To je zato što Fuse prema zadanim postavkama vidi naš prazan upit i ne podudara ga ni s čim. Ako sada tražimo nešto slično slurms, možemo vidjeti kako se naša pretraga dinamički ažurira s rezultatima!

Ako smo to ipak htjeli popraviti tako da se svi naši rezultati prikazuju kad nema upita, to možemo učiniti ifizjavom ili u mom primjeru, ternarnom, koja će prikazati sve znakove ako nema upita:

const characterResults = query ? results.map(character => character.item) : characters; 

I time imamo osnovnu pretragu!

Slijedite uz predavanje!

Što mogu učiniti dalje?

Ugađanje pretraživanja

Fuse.js dolazi s puno opcija pomoću kojih možete prilagoditi svoje pretraživanje kako želite. Želite pokazati samo sigurne rezultate? Koristite thresholdopciju! Želite upite osjetljive na velika i mala slova? Koristite isCaseSensitiveopciju!

//fusejs.io/api/options.html

Postavljanje zadanog upita s parametrima URL-a

Ponekad želite da se netko može povezati s određenim nizom rezultata. Da bismo to učinili, možda bismo htjeli dodati novi parametar URL-a poput ?q=bender.

Da bi ovo uspjelo, taj parametar URL-a možete zgrabiti pomoću javascripta i pomoću te vrijednosti postaviti naše querystanje.

Pridružite se razgovoru!

Jeste li ikad željeli dodati nejasno, dinamično pretraživanje u svoju aplikaciju @reactjs, ali niste znali kako? ?

Ovaj vodič vodi vas kroz upotrebu Fuse.js za dodavanje moćnog pretraživanja na strani klijenta u vašu React aplikaciju ⚛️

Pogledajte!? // t.co/EMlvXaOCat

- Colby Fayock (@colbyfayock) 26. svibnja 2020

Slijedite me za još Javascripta, UX-a i drugih zanimljivosti!

  • ? Slijedite me na Twitteru
  • ? Pretplatite se na moj Youtube
  • Up Prijavite se za moj bilten