Sådan tilføjes søgning til en React-app med Fuse.js

Søgning er en effektiv måde at hjælpe folk, der besøger dit websted, med at finde det indhold, der er vigtigst for dem. Men ofte er det virkelig udfordrende at finde ud af reglerne og logikken for at få det til at ske. I denne artikel vil vi se, hvordan vi kan bruge fuse.js til at føje søgning til vores apps.

  • Hvad er fuse.js?
  • Hvorfor er søgning vigtig?
  • Hvad skal vi bygge?
  • Trin 0: Bootstrapping vores app
  • Trin 1: Installation af Fuse.js
  • Trin 2: Oprettelse af en ny Fuse-søgeforekomst
  • Trin 3: Opsætning af dynamisk søgning baseret på brugerinput

Hvad er fuse.js?

Fuse.js er et JavaScript-bibliotek, der giver fuzzy søgefunktioner til applikationer og websteder. Det er pænt og nemt at bruge ud af kassen, men inkluderer også konfigurationsmuligheder, der giver dig mulighed for at tilpasse og skabe kraftige løsninger.

Hvorfor er søgning vigtig?

Uanset om du er en indholdsskaber eller prøver at sælge et produkt med dit websted, er det vigtigt at hjælpe dine besøgende med at finde det, de leder efter.

Hvis du bygger et e-handelswebsted, vil du have nogen til at være i stand til nemt at finde dine Bender-vinylfigurer i stedet for først at skulle gennemgå hele kataloget.

Hvad skal vi bygge?

Vi starter med et grundlæggende eksempel på Create React App. Det vil indeholde nogle karakteroplysninger som strukturerede data til et af mine foretrukne shows Futurama, der simpelthen dumpes ud i en HTML-liste.

Med denne liste skal vi bruge fuse.js til at levere søgefunktioner på klientsiden, så vi kan demonstrere, at vi søger efter det tegn, vi leder efter, ved deres navn og andre detaljer.

Trin 0: Bootstrapping vores app

For at komme i gang har vi brug for indhold til at arbejde med. Jeg kom i gang med at opbygge en liste med tegn fra Futurama som strukturerede json-data, som jeg satte på en liste med en ny Create React-app.

Du vil også bemærke, at jeg allerede har tilføjet et input til vores søgning. Det er endnu ikke funktionelt, men vi bruger det til at komme i gang.

Hvis du gerne vil starte samme sted, oprettede jeg en filial med min demo-repo, som du kan klone lokalt for at gå igennem projektet med mig!

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

Git gren "start"

Eller følg med forpligtelsen.

Trin 1: Installation af Fuse.js

Den første ting, vi vil gøre, er faktisk at tilføje Fuse.js til vores app. Kør i dit projekt:

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

Dette sparer afhængigheden af ​​vores projekt, så vi kan bruge det i vores projekt.

Dernæst vil vi importere afhængigheden til vores app, så vi kan begynde at bygge med den. Øverst i din fil, i vores tilfælde, src/App.jshvis du følger sammen med mig i et nyt Create React App-projekt, skal du tilføje:

import Fuse from 'fuse.js'; 

Hvis du vil teste, at det fungerer, kan du console.log(Fuse)se og se vores Fuseklasse, vi bruger til at oprette vores søgefunktioner.

Og med det er vi klar til at komme i gang!

Følg med på forpligtelsen

Trin 2: Oprettelse af en ny Fuse-søgeforekomst

For at bruge Fuse.js, vil vi først oprette en ny forekomst af det.

Øverst på din komponent skal du tilføje:

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

Med dette gør:

  • Opretter en ny forekomst af sikring
  • Passer i vores charactersvifte af objekter
  • Specificerer de 3 nøgler i vores data, som vi vil søge på

For at udføre søgningen kan vi derefter tilføje:

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

Og hvis vi trøster, logger vi ud af resultaterne, kan vi se:

Du vil dog bemærke, at vi har flere resultater end vores ven Bender. Fuse.js giver en "fuzzy search", hvilket betyder at den forsøger at hjælpe dig, hvis du ikke er sikker på, hvad du leder efter, eller hvis du stave forkert din forespørgsel.

For at få en idé om, hvordan dette fungerer, lad os tilføje includeScoremuligheden til vores søgning:

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

Nu kan vi se scoreattributten i vores resultatobjekt.

Du vil bemærke, at vores første resultat har en virkelig lav score. Med fuse.js betyder en lavere score, at den er tættere på et nøjagtigt match.

En score på 0 indikerer et perfekt match, mens en score på 1 indikerer en fuldstændig uoverensstemmelse.

Det siger, at det er utroligt sandsynligt, at det første resultat er det, vi leder efter, men det er ikke sikkert i de andre.

Så med vores resultater vil vi faktisk forbinde det til vores brugergrænseflade. Hvis du bemærker, at vores array-output er anderledes end det, vi kortlægger for HTML-listen, så lad os oprette en ny variabel, som vi kan ændre den til:

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

Hvad dette gør er at oprette et nyt array ved hjælp af kortmetoden, der kun inkluderer itemegenskaben fra hvert array-objekt.

Så hvis vi erstatter vores characterskort inde på vores liste med characterResults.map:


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

Vi kan nu se, at vores side kun viser resultaterne for "bender"!

Følg med på forpligtelsen!

Trin 3: Opsætning af dynamisk søgning baseret på brugerinput

Nu hvor vi har en hårdkodet søgning, der fungerer, ønsker vi, at nogen rent faktisk kan bruge søgeindgangen til at søge!

For at opnå dette skal vi bruge useStatekrogen og lytte til ændringer i inputfeltet, som dynamisk vil skabe en søgning efter vores data.

Først skal du importere useStatekrogen fra React:

import React, { useState } from 'react'; 

Lad os derefter bruge den krog til at oprette en tilstandsinstans:

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

Her opretter vi en ny tilstand, querysom vi kan opdatere med, updateQuerysom standard er en tom streng ( '').

Med det, lad os fortælle vores søgeinput at bruge den queryværdi, som den er værdi:

På dette tidspunkt skal intet være anderledes, da vi bruger en tom forespørgsel.

Lad os nu tilføje en begivenhedshåndterer til vores input, som vi kan bruge til at opdatere vores tilstand:

Og vi vil oprette den funktion, så vi kan bruge den:

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

Dette opdaterer vores querymed inputværdien, hver gang den ændres.

Nu hvor vores query  vilje har det, vi vil søge efter, kan vi opdatere vores søgeinstans:

const results = fuse.search(query); 

Og nu hvis du genindlæser siden, er den tom! ?

Det skyldes, at Fuse som standard ser vores tomme forespørgsel og ikke matcher det med noget. Hvis vi nu søger efter noget lignende slurms, kan vi se vores søgning dynamisk opdateres med resultater!

Hvis vi dog vil rette dette, så alle vores resultater vises, når der ikke er nogen forespørgsel, kan vi gøre det med en iferklæring eller i mit eksempel en ternær, der viser alle tegnene, hvis der ikke er nogen forespørgsel:

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

Og med det har vi vores grundlæggende søgning!

Følg med på forpligtelsen!

Hvad kan jeg gøre nu?

Tuning af din søgning

Fuse.js kommer med mange muligheder, som du kan bruge til at indstille din søgning til, hvordan du vil. Vil du kun vise sikre resultater? Brug thresholdmuligheden! Vil du have store og små bogstaver? Brug isCaseSensitivemuligheden!

//fusejs.io/api/options.html

Indstilling af standardforespørgsel med URL-parametre

Nogle gange vil du have nogen til at være i stand til at linke til et bestemt sæt resultater. For at gøre dette vil vi muligvis kunne tilføje en ny URL-parameter som f.eks ?q=bender.

For at få dette til at fungere kan du gribe den URL-parameter med javascript og bruge denne værdi til at indstille vores querytilstand.

Deltag i samtalen!

Har du nogensinde ønsket at tilføje fuzzy, dynamisk søgning til din @reactjs-app, men vidste ikke hvordan? ?

Denne guide fører dig gennem, hvordan du bruger Fuse.js til at tilføje kraftfuld klientsidesøgning til din React-app ⚛️

Tjek det ud!? // t.co/EMlvXaOCat

- Colby Fayock (@colbyfayock) 26. maj 2020

Følg mig for mere Javascript, UX og andre interessante ting!

  • ? Følg mig på Twitter
  • ? ️ Abonner på min Youtube
  • ✉️ Tilmeld dig mit nyhedsbrev