Căutarea este un mod puternic de a ajuta oamenii care vă vizitează site-ul să găsească conținutul cel mai important pentru ei. Dar de multe ori este foarte dificil să descoperi regulile și logica pentru a face acest lucru. În acest articol, vom vedea cum putem folosi fuse.js pentru a adăuga căutarea în aplicațiile noastre.

  • Ce este fuse.js?
  • De ce este importantă căutarea?
  • Ce vom construi?
  • Pasul 0: Bootstrapping aplicația noastră
  • Pasul 1: Instalarea Fuse.js
  • Pasul 2: Crearea unei noi instanțe de căutare a siguranței
  • Pasul 3: Configurarea căutării dinamice pe baza datelor introduse de utilizator

Ce este fuse.js?

Fuse.js este o bibliotecă JavaScript care oferă funcții de căutare fuzzy pentru aplicații și site-uri web. Este frumos și ușor de utilizat, dar include și opțiuni de configurare care vă permit să modificați și să creați soluții puternice.

De ce este importantă căutarea?

Indiferent dacă sunteți creator de conținut sau încercați să vindeți un produs cu site-ul dvs., este important să vă ajutați vizitatorii să găsească efectiv ceea ce caută.

Dacă construiți un site de comerț electronic, doriți ca cineva să vă poată găsi cu ușurință figurile de vinil Bender, mai degrabă decât să fie nevoit să caute mai întâi întregul catalog.

Ce vom construi?

Vom începe cu un exemplu de bază pentru aplicația Create React. Va include câteva informații despre personaje ca date structurate pentru una dintre emisiunile mele preferate Futurama, care sunt pur și simplu aruncate într-o listă HTML.

Cu această listă, vom folosi fuse.js pentru a oferi capabilități de căutare pe partea de client, permițându-ne să demonstrăm căutarea personajului pe care îl căutăm după numele și alte detalii.

Pasul 0: Bootstrapping aplicația noastră

Pentru a începe, vom avea nevoie de conținut pentru a lucra. Am început prin a construi o listă de personaje din Futurama ca date structurate JSON pe care le-am pus într-o listă cu o nouă aplicație Create React.

Cum se adauga cautarea intr o aplicatie React cu Fusejs
Demo de căutare a personajelor Futurama

De asemenea, veți observa că am adăugat deja o intrare pentru căutarea noastră. Nu este încă funcțional, dar vom folosi asta pentru a începe.

Dacă doriți să începeți în același loc, am creat o filială cu repo-ul meu demo pe care îl puteți clona local pentru a parcurge proiectul cu mine!

git clone --single-branch --branch start git@github.com:colbyfayock/my-futurama-characters.git

Git branch “start”

Sau urmați împreună cu comiterea.

Pasul 1: Instalarea Fuse.js

Primul lucru pe care vrem să îl facem este să adăugăm de fapt Fuse.js la aplicația noastră. În proiectul dvs., executați:

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

Acest lucru va salva dependența de proiectul nostru, astfel încât să îl putem folosi în proiectul nostru.

Apoi, vom dori să importăm dependența în aplicația noastră, astfel încât să putem începe să construim cu ea. În partea de sus a fișierului dvs., în cazul nostru src/App.js dacă urmărești împreună cu mine un nou proiect de aplicație Create React, adaugă:

import Fuse from 'fuse.js';

Dacă doriți să testați că funcționează, puteți console.log(Fuse) și vezi-le pe ale noastre Fuse clasa pe care o vom folosi pentru a ne crea capacitățile de căutare.

1612154829 799 Cum se adauga cautarea intr o aplicatie React cu Fusejs
Clasa fuse.js importată

Și cu asta, suntem gata să începem!

Urmați împreună cu comiterea

Pasul 2: Crearea unei noi instanțe de căutare a siguranței

Pentru a utiliza Fuse.js, vom dori mai întâi să creăm o nouă instanță a acestuia.

În partea de sus a componentei dvs., adăugați:

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

Cu aceasta se face:

  • Creează o nouă instanță de siguranță
  • Trece în characters matrice de obiecte
  • Specifică cele 3 chei din datele noastre pe care dorim să le căutăm

Apoi, pentru a efectua căutarea, putem adăuga:

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

Și dacă consolăm deconectăm rezultatele, putem vedea:

1612154829 529 Cum se adauga cautarea intr o aplicatie React cu Fusejs
Rezultatele căutării de bază fuse.js

Veți observa că avem mai multe rezultate decât prietenul nostru Bender. Fuse.js oferă o „căutare fuzzy”, ceea ce înseamnă că încearcă să vă ajute în cazul în care nu sunteți sigur ce căutați sau dacă nu scrieți greșit interogarea.

Pentru a vă face o idee despre cum funcționează, să adăugăm includeScore opțiune pentru căutarea noastră:

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

Acum putem vedea score atribut în obiectul nostru de rezultate.

1612154829 155 Cum se adauga cautarea intr o aplicatie React cu Fusejs
Rezultatele căutării Fuse.js cu scor

Veți observa că primul nostru rezultat are un scor foarte scăzut. Cu fuse.js, un scor mai mic înseamnă că este mai aproape de o potrivire exactă.

Un scor 0 indică o potrivire perfectă, în timp ce un scor 1 indică o nepotrivire completă.

Se spune că este incredibil de probabil că primul rezultat este ceea ce căutăm, dar nu este încrezător în ceilalți.

Deci, cu rezultatele noastre, vrem să le conectăm de fapt la interfața noastră de utilizare. Dacă observați că ieșirea matricei noastre este diferită de ceea ce suntem mapate pentru lista HTML, așa că haideți să creăm o nouă variabilă pe care o putem schimba în:

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

Ceea ce face este să creezi o nouă matrice folosind Hartă metoda care va include numai item proprietate din fiecare obiect matrice.

Atunci, dacă ne înlocuim characters harta din lista noastră cu characterResults.map:

<ul className="characters">
  {characterResults.map(character => {
    const { name, company, species, thumb } = character;

Acum putem vedea că pagina noastră arată doar rezultatele pentru “bender”!

1612154830 735 Cum se adauga cautarea intr o aplicatie React cu Fusejs
Demo cu rezultate filtrate

Urmați împreună cu comiterea!

Pasul 3: Configurarea căutării dinamice pe baza datelor introduse de utilizator

Acum, că avem o căutare codificată funcțională, dorim ca cineva să poată utiliza efectiv intrarea de căutare pentru a căuta!

Pentru a realiza acest lucru, vom folosi useState conectați și ascultați modificările la input , care va crea dinamic o căutare pentru datele noastre.

Mai întâi, importați fișierul useState cârlig de la React:

import React, { useState } from 'react';

În continuare, să folosim acel cârlig pentru a crea o instanță de stare:

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

Aici, creăm o nouă stare de query cu care ne putem actualiza updateQuery care implicit este un șir gol ('').

Cu asta, să le spunem căutărilor noastre de căutare să le folosim query valoare ca valoare:

<input type="text" value={query} />

În acest moment, nimic nu ar trebui să fie diferit, deoarece folosim o interogare necompletată.

1612154830 735 Cum se adauga cautarea intr o aplicatie React cu Fusejs
Demo cu rezultate filtrate – nimic nu s-a schimbat

Acum să adăugăm un controler de evenimente la intrarea noastră pe care îl putem folosi pentru a ne actualiza starea:

<input type="text" value={query} onChange={onSearch} />

Și vom dori să creăm acea funcție, astfel încât să o putem folosi:

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

Aceasta ne va actualiza query cu valoarea intrării de fiecare dată când se schimbă.

Acum că a noastră query vom avea ceea ce dorim să căutăm, ne putem actualiza instanța de căutare:

const results = fuse.search(query);

Și acum, dacă reîncărcați pagina, este goală! ?

1612154830 585 Cum se adauga cautarea intr o aplicatie React cu Fusejs
Demo fără rezultate

Asta pentru că, în mod implicit, Fuse vede interogarea noastră goală și nu se potrivește cu nimic. Dacă acum căutăm ceva de genul slurms, putem vedea căutarea noastră se actualizează dinamic cu rezultate!

1612154830 941 Cum se adauga cautarea intr o aplicatie React cu Fusejs
Demo cu rezultate pentru “slurms”

Dacă am vrut să remediem acest lucru, astfel încât toate rezultatele noastre să apară atunci când nu există nicio interogare, putem face acest lucru cu un if sau în exemplul meu, un ternar, care va afișa toate caracterele dacă nu există nicio interogare:

const characterResults = query ? results.map(character => character.item) : characters;
Cum se adauga cautarea intr o aplicatie React cu Fusejs
Demo cu toate rezultatele

Și cu aceasta, avem căutarea noastră de bază!

1612154830 869 Cum se adauga cautarea intr o aplicatie React cu Fusejs
Demo cu rezultate filtrate pentru “zoidberg”

Urmați împreună cu comiterea!

Ce pot face în continuare?

Fuse.js vine cu o mulțime de opțiuni pe care le puteți utiliza pentru a vă regla căutarea, oricum doriți. Doriți să afișați doar rezultate sigure? Folosește threshold opțiune! Doriți interogări sensibile la majuscule? Folosește isCaseSensitive opțiune!

https://fusejs.io/api/options.html

Setarea interogării implicite cu parametrii URL

Uneori doriți ca cineva să poată conecta la un anumit set de rezultate. Pentru a face acest lucru, ne-ar putea dori să putem adăuga un nou parametru URL, cum ar fi ?q=bender.

Pentru ca acest lucru să funcționeze, puteți prelua acel parametru URL cu javascript și puteți utiliza acea valoare pentru a seta parametrul nostru query stat.

Alatura-te conversatiei!