A keresés hatékony módja annak, hogy a webhelyét felkereső emberek megtalálják a számukra legfontosabb tartalmat. De ennek megvalósításához gyakran nagyon nehéz kitalálni a szabályokat és a logikát. Ebben a cikkben megtudjuk, hogyan használhatjuk a fuse.js-t a keresés hozzáadásához az alkalmazásainkhoz.
- Mi az a fuse.js?
- Miért fontos a keresés?
- Mit fogunk építeni?
- 0. lépés: Bootstrapping alkalmazásunk
- 1. lépés: A Fuse.js telepítése
- 2. lépés: Új Fuse keresési példány létrehozása
- 3. lépés: Dinamikus keresés beállítása a felhasználó bevitele alapján
Mi az a fuse.js?
A Fuse.js egy JavaScript könyvtár, amely fuzzy keresési lehetőségeket kínál az alkalmazásokhoz és webhelyekhez. Szép és könnyen használható dobozon kívül, de olyan konfigurációs lehetőségeket is tartalmaz, amelyek lehetővé teszik a módosítást és az erőteljes megoldások létrehozását.
Miért fontos a keresés?
Akár tartalomalkotó vagy, akár terméket szeretne eladni a webhelyével, fontos, hogy a látogatók valóban megtalálják azt, amit keresnek.
Ha e-kereskedelmi webhelyet épít, azt szeretné, ha valaki könnyedén megtalálná a Bender bakelitjeit, ahelyett, hogy előbb át kellene ásnia a teljes katalógust.
Mit fogunk építeni?
Kezdjük egy alapvető Create React App példával. Néhány karakterinformációt tartalmaz majd strukturált adatokként az egyik kedvenc Futurama műsoromhoz, amelyet egyszerűen kiírnak egy HTML-listába.
Ezzel a listával a fuse.js segítségével fogjuk biztosítani az ügyféloldali keresési lehetőségeket, lehetővé téve számunkra, hogy bemutassuk a keresett karakter nevét és egyéb részleteit.
0. lépés: Bootstrapping alkalmazásunk
A kezdéshez tartalomra lesz szükségünk, amellyel működhetünk. Azzal kezdtem, hogy a Futurama karaktereinek listáját strukturált JSON adatokként állítottam össze, és egy friss Create React alkalmazással felsoroltam.
Azt is észreveszi, hogy már adtam egy bevitelt a kereséshez. Még nem működik, de ezt felhasználjuk a kezdéshez.
Ha ugyanazon a helyen szeretne elindulni, létrehoztam egy fiókot a bemutató repómmal, amelyet helyben klónozhat, hogy végigjárja velem a projektet!
git clone --single-branch --branch start [email protected]:colbyfayock/my-futurama-characters.git Git ág "start"
Vagy kövesse az elkötelezettséget.
1. lépés: A Fuse.js telepítése
Első dolog, amit meg akarunk tenni, az az, hogy valóban hozzáadjuk a Fuse.js alkalmazást. A projektben futtassa:
yarn add fuse.js # or npm install --save fuse.js Ez megmenti a projektünktől való függőséget, így képesek leszünk használni a projektünkben.
Ezután importálni akarjuk a függőséget az alkalmazásunkba, hogy elkezdhessük az építést vele. A fájl tetején, esetünkben, src/App.jsha velem együtt jár egy új Create React App projektben, adja hozzá:
import Fuse from 'fuse.js'; Ha szeretné kipróbálni, hogy működik-e, megtekintheti console.log(Fuse)és megtekintheti Fuseosztályunkat, amelyet a keresési képességeink létrehozásához használunk.
És ezzel készen állunk a kezdésre!
Kövesse az elkötelezettséggel együtt
2. lépés: Új Fuse keresési példány létrehozása
A Fuse.js használatához először létre kell hozni egy új példányt.
Az összetevő tetején adja hozzá:
const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ] }); Ezzel:
- Létrehoz egy új Fuse példányt
- Elhalad
charactersa tárgyak tömbjében - Megadja az adatainkban szereplő 3 kulcsot, amelyeken keresni akarunk
Ezután a keresés végrehajtásához hozzáadhatjuk:
const results = fuse.search('bender'); És ha konzollal kijelentkeztetjük az eredményeket, láthatjuk:
Észre fogja venni, hogy bár több eredményünk van, mint Bender barátunk. A Fuse.js "fuzzy search" szolgáltatást nyújt, vagyis megpróbál segíteni abban az esetben, ha nem biztos benne, hogy mit keres, vagy ha hibásan írja be a lekérdezést.
Hogy képet kapjunk ennek működéséről, adjuk hozzá az includeScoreopciót a kereséshez:
const fuse = new Fuse(characters, { keys: [ 'name', 'company', 'species' ], includeScore: true }); Most láthatjuk az scoreattribútumot az eredményobjektumunkban.
Észre fogja venni, hogy az első eredményünk valóban alacsony pontszámot kapott. A fuse.js használatával az alacsonyabb pontszám azt jelenti, hogy közelebb áll a pontos mérkőzéshez.
A 0-as pont a tökéletes mérkőzést, míg az 1-es a teljes eltérést jelzi.
Hihetetlenül valószínű, hogy az első eredmény az, amit keresünk, de a többiekben nem biztos.
Eredményeinkkel tehát azt szeretnénk valójában összekapcsolni a felhasználói felületünkkel. Ha azt veszi észre, hogy a tömb kimenetünk eltér attól, amit a HTML-listán feltérképezünk, hozzunk létre egy új változót, amelyre módosíthatjuk:
const results = fuse.search('bender'); const characterResults = results.map(character => character.item); Ezzel egy új tömböt hoz létre a térkép módszerrel, amely csak az itemegyes tömbobjektumok tulajdonságait tartalmazza .
Akkor, ha a characterstérképünket a listán belül helyettesítjük a következővel characterResults.map:
{characterResults.map(character => { const { name, company, species, thumb } = character;
Most már láthatjuk, hogy oldalunk csak a "bender" eredményeit mutatja!
Kövesse az elkötelezettséggel együtt!
3. lépés: Dinamikus keresés beállítása a felhasználó bevitele alapján
Most, hogy jól kódolt keresés működik, azt akarjuk, hogy valaki valóban képes legyen használni a keresési adatbevitelt a kereséshez!
Ennek elérése érdekében fogjuk használni a useStatehorgot, és figyelni inputfogunk a mező változásaira , amelyek dinamikusan létrehozzák az adataink keresését.
Először importálja a useStatehorgot a React-ból:
import React, { useState } from 'react'; Ezután használjuk ezt a kampót egy állami példány létrehozásához:
const [query, updateQuery] = useState(''); Itt létrehozunk egy új állapotot, queryamelyet frissíteni lehet updateQuery, és alapértelmezés szerint egy üres karakterláncot ( '') állítunk elő .
Ezzel mondjuk meg keresési inputunknak, hogy ezt az queryértéket használja annak értékeként:
Ezen a ponton semmi sem lehet más, mivel üres lekérdezést használunk.
Most adjunk hozzá egy eseménykezelőt a bemenetünkhöz, amellyel frissíthetjük állapotunkat:
És szeretnénk létrehozni ezt a függvényt, hogy használhassuk:
function onSearch({ currentTarget }) { updateQuery(currentTarget.value); } Ez querybármikor frissíti az input értékét, ha ez megváltozik.
Most, hogy query meglesz a keresni kívánt dolog, frissíthetjük keresési példányunkat:
const results = fuse.search(query); És most, ha újratölti az oldalt, az üres! ?
Ez azért van, mert alapértelmezés szerint a Fuse meglátja az üres lekérdezésünket, és semmihez sem igazítja. Ha most valami hasonlóra slurmskeresünk, láthatjuk, hogy a keresés dinamikusan frissül az eredményekkel!
Ha ezt meg akartuk javítani úgy, hogy az összes eredményünk megjelenjen, amikor nincs lekérdezés, akkor megtehetjük egy ifutasítással vagy az én példámban egy háromszöggel, amely az összes karaktert megmutatja, ha nincs lekérdezés:
const characterResults = query ? results.map(character => character.item) : characters; És ezzel megvan az alapvető keresésünk!
Kövesse az elkötelezettséggel együtt!
Mit tehetek ezután?
A keresés hangolása
A Fuse.js sok olyan opcióval rendelkezik, amelyekkel a keresést a kívánt módon hangolhatja. Csak magabiztos eredményeket szeretne felmutatni? Használja az thresholdopciót! A kis- és nagybetűk közötti lekérdezéseket szeretné? Használja az isCaseSensitiveopciót!
//fusejs.io/api/options.html
Az alapértelmezett lekérdezés beállítása URL-paraméterekkel
Néha azt szeretné, ha valaki tudna linkelni egy adott eredményhalmazhoz. Ehhez érdemes lehet hozzáadni egy új URL-paramétert, például ?q=bender.
A működés érdekében megragadhatja azt az URL-paramétert javascript-tel, és ezzel az értékkel állíthatja be queryállapotunkat.
Csatlakozz a beszélgetéshez!
Valaha akartál fuzzy, dynamic keresést adni a @reactjs alkalmazásodhoz, de nem tudtad, hogyan? ?
Ez az útmutató bemutatja, hogyan használhatja a Fuse.js-t az ügyféloldali keresés hatékony hozzáadásához a React alkalmazáshoz ⚛️
Nézd meg!? // t.co/EMlvXaOCat
- Colby Fayock (@colbyfayock) 2020. május 26
- ? Kövess a Twitteren
- ? ️ Iratkozzon fel a Youtube-ra
- ✉️ Iratkozzon fel a hírlevelemre