Kuinka lisätä hakua React-sovellukseen Fuse.js: n avulla

Haku on tehokas tapa auttaa sivustollasi vierailevia löytämään heille tärkein sisältö. Mutta usein on todella haastavaa selvittää säännöt ja logiikka sen toteuttamiseksi. Tässä artikkelissa kerrotaan, kuinka voimme käyttää fuse.js: ää hakujen lisäämiseen sovelluksiimme.

  • Mikä on fuse.js?
  • Miksi haku on tärkeää?
  • Mitä aiomme rakentaa?
  • Vaihe 0: Käynnistä sovelluksemme uudelleen
  • Vaihe 1: Asenna Fuse.js
  • Vaihe 2: Uuden sulakehakuesimerkin luominen
  • Vaihe 3: Dynaamisen haun määrittäminen käyttäjän syötteen perusteella

Mikä on fuse.js?

Fuse.js on JavaScript-kirjasto, joka tarjoaa sumeat hakuominaisuudet sovelluksille ja verkkosivustoille. Se on mukava ja helppo käyttää heti pakkauksesta, mutta sisältää myös määritysvaihtoehtoja, joiden avulla voit säätää ja luoda tehokkaita ratkaisuja.

Miksi haku on tärkeää?

Olitpa sisällöntuottaja tai yrität myydä tuotetta verkkosivustollasi, on tärkeää auttaa kävijöitäsi löytämään etsimänsä.

Jos rakennat verkkokauppasivustoa, haluat, että joku pystyy helposti löytämään Bender-vinyylihahmosi sen sijaan, että hänen tarvitsisi kaivaa ensin läpi koko luettelo.

Mitä aiomme rakentaa?

Aloitamme luomalla perustavan esimerkin Create React -sovelluksesta. Se sisältää joitain hahmotietoja strukturoituna datana yhdelle suosikkinäytöksestäni Futurama, joka yksinkertaisesti viedään HTML-luetteloon.

Tämän luettelon avulla aiomme käyttää fuse.js-tiedostoa tarjotaksemme asiakaspuolen hakuominaisuudet, jolloin voimme osoittaa etsimämme merkin nimen ja muiden tietojen perusteella.

Vaihe 0: Käynnistä sovelluksemme uudelleen

Aloittamiseksi tarvitsemme sisältöä toimiakseen. Aloitin rakentamalla Futuraman merkkien luettelon jäsenneltyinä json-tiedoina, jotka laitoin luetteloon tuoreella Create React -sovelluksella.

Huomaat myös, että olen jo lisännyt syötteen hakuihimme. Se ei ole vielä toimiva, mutta käytämme sitä aloittaaksesi.

Jos haluat aloittaa samasta paikasta, loin demorepolloni haaran, jonka voit kloonata paikallisesti käydäksesi läpi projektin kanssani!

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

Git haara "start"

Tai seuraa sitoutumista.

Vaihe 1: Asenna Fuse.js

Ensimmäinen asia, jonka haluamme tehdä, on todella lisätä Fuse.js sovellukseen. Suorita projektissasi:

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

Tämä säästää riippuvuutta projektistamme, jotta voimme käyttää sitä projektissamme.

Seuraavaksi haluamme tuoda riippuvuuden sovellukseemme, jotta voimme alkaa rakentaa sitä. src/App.jsJos seuraat tiedostosi yläosassa, jos seuraat kanssani uudessa Create React App -sovelluksessa, lisää:

import Fuse from 'fuse.js'; 

Jos haluat testata, että se toimii, voit console.log(Fuse)nähdä ja nähdä Fuseluokkamme, jota käytämme luomaan hakuominaisuuksia.

Ja sen kanssa olemme valmiita aloittamaan!

Seuraa yhdessä sitoutumisen kanssa

Vaihe 2: Uuden sulakehakuesimerkin luominen

Fuse.js: n käyttämistä varten haluamme ensin luoda siitä uuden ilmentymän.

Lisää komponentin yläosaan:

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

Tämän avulla:

  • Luo uuden sulakkeen
  • Hyväksyy charactersjoukon esineitä
  • Määrittää 3 avainta tiedoissamme, joista haluamme etsiä

Seuraavaksi haun suorittamiseksi voimme lisätä:

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

Ja jos konsoli kirjautuu ulos, voimme nähdä:

Huomaat, että meillä on kuitenkin enemmän tuloksia kuin ystävämme Bender. Fuse.js tarjoaa "sumean haun", mikä tarkoittaa, että se yrittää auttaa sinua, jos et ole varma mitä etsit tai jos kirjoitat väärin kyselysi.

Saadaksemme kuvan siitä, miten tämä toimii, lisätään includeScorevaihtoehto hakuihimme:

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

Nyt voimme nähdä scoreattribuutin tulosobjektissamme.

Huomaat, että ensimmäisellä tuloksellamme on todella matala pisteet. Fuse.js: n avulla matalampi pisteet tarkoittavat sitä, että se on lähempänä tarkkaa ottelua.

Pisteet 0 tarkoittavat täydellistä ottelua, kun taas pisteet 1 tarkoittavat täydellistä ristiriitaa.

Sanominen on uskomattoman todennäköistä, että ensimmäinen tulos on sitä, mitä etsimme, mutta se ei ole varma muista.

Joten tulemuksillamme haluamme todella liittää sen käyttöliittymään. Jos huomaat, että matriisilähtömme on erilainen kuin HTML-luettelon kartoitus, luodaan uusi muuttuja, jolla voimme muuttaa sen:

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

Tämä on uuden taulukon luominen karttamenetelmällä, joka sisältää vain itemominaisuuden kustakin matriisiobjektista.

Sitten, jos korvataan characterskarttamme luettelossamme characterResults.map:


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

Voimme nyt nähdä, että sivullamme näytetään tulokset vain "taivuttimelle"!

Seuraa sitoutumista!

Vaihe 3: Dynaamisen haun määrittäminen käyttäjän syötteen perusteella

Nyt kun kova koodattu haku toimii, haluamme, että joku pystyy todella käyttämään hakusyöttöä hakuun!

Tämän saavuttamiseksi aiomme käyttää useStatekoukkua ja kuunnella inputkentän muutoksia , jotka luovat dynaamisesti haun tiedoillemme.

Tuo ensin useStatekoukku Reactista:

import React, { useState } from 'react'; 

Seuraavaksi käytetään tätä koukkua valtion instanssin luomiseen:

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

Tässä luomme uuden tilan, queryjonka voimme päivittää updateQueryoletusarvoisesti tyhjään merkkijonoon ( '').

Kerro tämän avulla hakusyöttömme käyttämään kyseistä queryarvoa sen arvona:

Tässä vaiheessa mikään ei saisi olla erilainen, koska käytämme tyhjää kyselyä.

Lisätään nyt tapahtumakäsittelijä syötteeseemme, jota voimme käyttää tilamme päivittämiseen:

Ja haluamme luoda kyseisen toiminnon, jotta voimme käyttää sitä:

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

Tämä päivittää querytulomme arvon aina, kun se muuttuu.

Nyt kun meillä query  on mitä haluamme etsiä, voimme päivittää hakujärjestelmän:

const results = fuse.search(query); 

Ja jos lataat sivun uudelleen, se on tyhjä! ?

Tämä johtuu siitä, että oletuksena Fuse näkee tyhjän kyselymme eikä sovita sitä mihinkään. Jos etsimme nyt jotain sellaista slurms, voimme nähdä haun dynaamisesti päivittyvän tuloksilla!

Jos halusimme korjata ongelman niin, että kaikki tulokset näkyvät, kun kyselyä ei ole, voimme tehdä sen iflauseella tai esimerkissäni kolmikantaisella, joka näyttää kaikki merkit, jos kyselyä ei ole:

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

Ja tämän jälkeen meillä on perushaku!

Seuraa sitoutumista!

Mitä voin tehdä seuraavaksi?

Hakusi virittäminen

Fuse.js sisältää monia vaihtoehtoja, joiden avulla voit virittää haun haluamallesi tavalla. Haluatko näyttää vain luottavaisia ​​tuloksia? Käytä thresholdvaihtoehtoa! Haluatko isot ja pienet kirjaimet? Käytä isCaseSensitivevaihtoehtoa!

//fusejs.io/api/options.html

Oletuskyselyn asettaminen URL-parametreilla

Joskus haluat, että joku pystyy linkittämään tietyn sarjan tuloksia. Tätä varten saatamme haluta pystyä lisäämään uuden URL-parametrin, kuten ?q=bender.

Jotta tämä toimisi, voit napata kyseisen URL-parametrin javascriptillä ja käyttää tätä arvoa tilamme asettamiseen query.

Tulla mukaan keskusteluun!

Oletko koskaan halunnut lisätä sumeaa, dynaamista hakua @reactjs -sovellukseesi, mutta et tiennyt miten? ?

Tässä oppaassa kerrotaan, miten Fuse.js: n avulla lisätään tehokas asiakaspuolen haku React-sovellukseesi ⚛️

Katso se!? // t.co/EMlvXaOCat

- Colby Fayock (@colbyfayock) 26. toukokuuta 2020

Seuraa minua saadaksesi lisää Javascriptiä, UX: ää ja muita mielenkiintoisia asioita!

  • ? Seuraa minua Twitterissä
  • ? ️ Tilaa Youtube
  • ✉️ Rekisteröidy uutiskirjeeseen