Hinzufügen einer Suche zu einer Reaktions-App mit Fuse.js

Die Suche ist eine leistungsstarke Methode, mit der Besucher Ihrer Website den für sie wichtigsten Inhalt finden können. Aber oft ist es wirklich schwierig, die Regeln und die Logik herauszufinden, um dies zu erreichen. In diesem Artikel werden wir sehen, wie wir fuse.js verwenden können, um unseren Apps eine Suche hinzuzufügen.

  • Was ist fuse.js?
  • Warum ist die Suche wichtig?
  • Was werden wir bauen?
  • Schritt 0: Bootstrapping unserer App
  • Schritt 1: Installieren von Fuse.js
  • Schritt 2: Erstellen einer neuen Fuse-Suchinstanz
  • Schritt 3: Einrichten der dynamischen Suche basierend auf Benutzereingaben

Was ist fuse.js?

Fuse.js ist eine JavaScript-Bibliothek, die Fuzzy-Suchfunktionen für Anwendungen und Websites bietet. Es ist sofort einsatzbereit und benutzerfreundlich, enthält aber auch Konfigurationsoptionen, mit denen Sie leistungsstarke Lösungen optimieren und erstellen können.

Warum ist die Suche wichtig?

Unabhängig davon, ob Sie Content-Ersteller sind oder versuchen, ein Produkt mit Ihrer Website zu verkaufen, ist es wichtig, dass Ihre Besucher tatsächlich finden, wonach sie suchen.

Wenn Sie eine E-Commerce-Website erstellen, möchten Sie, dass jemand Ihre Bender-Vinylfiguren leicht finden kann, anstatt zuerst den gesamten Katalog durchsuchen zu müssen.

Was werden wir bauen?

Wir beginnen mit einem grundlegenden Beispiel für eine Create React App. Es wird einige Charakterinformationen als strukturierte Daten für eine meiner Lieblingssendungen Futurama enthalten, die einfach in eine HTML-Liste verschoben werden.

Mit dieser Liste werden wir fuse.js verwenden, um clientseitige Suchfunktionen bereitzustellen, mit denen wir die Suche nach dem gesuchten Charakter anhand seines Namens und anderer Details demonstrieren können.

Schritt 0: Bootstrapping unserer App

Um loszulegen, benötigen wir Inhalte, mit denen wir arbeiten können. Ich begann damit, eine Liste von Charakteren aus Futurama als strukturierte JSON-Daten zu erstellen, die ich mit einer neuen Create React App in eine Liste einfügte.

Sie werden auch feststellen, dass ich bereits eine Eingabe für unsere Suche hinzugefügt habe. Es ist noch nicht funktionsfähig, aber wir werden es verwenden, um loszulegen.

Wenn Sie am selben Ort beginnen möchten, habe ich mit meinem Demo-Repo einen Zweig erstellt, den Sie lokal klonen können, um mit mir durch das Projekt zu gehen!

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

Git-Zweig "Start"

Oder folgen Sie dem Commit.

Schritt 1: Installieren von Fuse.js

Als erstes möchten wir Fuse.js zu unserer App hinzufügen. Führen Sie in Ihrem Projekt Folgendes aus:

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

Dadurch wird die Abhängigkeit von unserem Projekt gespeichert, sodass wir sie in unserem Projekt verwenden können.

Als nächstes wollen wir die Abhängigkeit in unsere App importieren, damit wir damit beginnen können. Fügen Sie oben in Ihrer Datei src/App.jsFolgendes hinzu: Wenn Sie in unserem Fall in einem neuen Projekt zum Erstellen einer React-App mit mir zusammenarbeiten, fügen Sie Folgendes hinzu:

import Fuse from 'fuse.js'; 

Wenn Sie testen möchten, ob es funktioniert, können console.log(Fuse)Sie unsere FuseKlasse sehen, mit der wir unsere Suchfunktionen erstellen.

Und damit sind wir bereit, loszulegen!

Folgen Sie dem Commit

Schritt 2: Erstellen einer neuen Fuse-Suchinstanz

Um Fuse.js zu verwenden, müssen wir zuerst eine neue Instanz davon erstellen.

Fügen Sie oben in Ihrer Komponente Folgendes hinzu:

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

Damit tut:

  • Erstellt eine neue Instanz von Fuse
  • Übergibt in unserer charactersReihe von Objekten
  • Gibt die 3 Schlüssel in unseren Daten an, nach denen gesucht werden soll

Als nächstes können wir zur Durchführung der Suche Folgendes hinzufügen:

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

Und wenn wir die Ergebnisse abmelden, können wir sehen:

Sie werden feststellen, dass wir mehr Ergebnisse haben als unser Freund Bender. Fuse.js bietet eine "Fuzzy-Suche", dh es versucht, Ihnen zu helfen, falls Sie nicht sicher sind, wonach Sie suchen, oder wenn Sie Ihre Anfrage falsch schreiben.

Um eine Vorstellung davon zu bekommen, wie dies funktioniert, fügen includeScorewir unserer Suche die Option hinzu:

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

Jetzt können wir das scoreAttribut in unserem Ergebnisobjekt sehen.

Sie werden feststellen, dass unser erstes Ergebnis eine sehr niedrige Punktzahl aufweist. Bei fuse.js bedeutet eine niedrigere Punktzahl, dass es näher an einer exakten Übereinstimmung liegt.

Eine Punktzahl von 0 zeigt eine perfekte Übereinstimmung an, während eine Punktzahl von 1 eine vollständige Nichtübereinstimmung anzeigt.

Es heißt, dass es unglaublich wahrscheinlich ist, dass das erste Ergebnis das ist, wonach wir suchen, aber es ist nicht zuversichtlich in die anderen.

Mit unseren Ergebnissen möchten wir dies tatsächlich mit unserer Benutzeroberfläche verbinden. Wenn Sie feststellen, dass unsere Array-Ausgabe anders ist als die, die wir für die HTML-Liste zuordnen, erstellen wir eine neue Variable, in die wir sie ändern können:

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

Dabei wird mit der Map-Methode ein neues Array erstellt, das nur die itemEigenschaft jedes Array-Objekts enthält.

Wenn wir dann unsere charactersKarte in unserer Liste ersetzen durch characterResults.map:

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

Wir können jetzt sehen, dass unsere Seite nur die Ergebnisse für "Bender" zeigt!

Folgen Sie dem Commit!

Schritt 3: Einrichten der dynamischen Suche basierend auf Benutzereingaben

Jetzt, da wir eine fest codierte Suche haben, möchten wir, dass jemand die Sucheingabe tatsächlich für die Suche verwenden kann!

Um dies zu erreichen, verwenden wir den useStateHook und warten auf Änderungen am inputFeld, wodurch dynamisch eine Suche nach unseren Daten erstellt wird.

Importieren Sie zunächst den useStateHook aus React:

import React, { useState } from 'react'; 

Verwenden Sie als Nächstes diesen Hook, um eine Statusinstanz zu erstellen:

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

Hier erstellen wir einen neuen Status query, den wir aktualisieren können. Der updateQueryStandardwert ist eine leere Zeichenfolge ( '').

Lassen Sie uns damit unsere Sucheingabe anweisen, diesen queryWert als Wert zu verwenden:

An dieser Stelle sollte nichts anders sein, da wir eine leere Abfrage verwenden.

Fügen wir nun unserer Eingabe einen Ereignishandler hinzu, mit dem wir unseren Status aktualisieren können:

Und wir wollen diese Funktion erstellen, damit wir sie verwenden können:

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

Dadurch wird unser queryWert bei jeder Änderung mit dem Wert der Eingabe aktualisiert .

Jetzt, da unser query  Wille das hat, wonach wir suchen möchten, können wir unsere Suchinstanz aktualisieren:

const results = fuse.search(query); 

Und jetzt, wenn Sie die Seite neu laden, ist sie leer! ?

Das liegt daran, dass Fuse standardmäßig unsere leere Abfrage sieht und sie mit nichts abgleichen kann. Wenn wir jetzt nach so etwas suchen slurms, können wir sehen, dass unsere Suche dynamisch mit Ergebnissen aktualisiert wird!

Wenn wir dies jedoch beheben wollten, damit alle unsere Ergebnisse angezeigt werden, wenn keine Abfrage vorliegt, können wir dies mit einer ifAnweisung oder in meinem Beispiel mit einer ternären Anweisung tun , die alle Zeichen anzeigt, wenn keine Abfrage vorhanden ist:

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

Und damit haben wir unsere grundlegende Suche!

Folgen Sie dem Commit!

Was kann ich als nächstes tun?

Optimieren Sie Ihre Suche

Fuse.js enthält viele Optionen, mit denen Sie Ihre Suche nach Ihren Wünschen abstimmen können. Möchten Sie nur zuversichtliche Ergebnisse zeigen? Nutzen Sie die thresholdOption! Möchten Sie zwischen Groß- und Kleinschreibung unterscheiden? Nutzen Sie die isCaseSensitiveOption!

//fusejs.io/api/options.html

Festlegen der Standardabfrage mit URL-Parametern

Manchmal möchten Sie, dass jemand in der Lage ist, eine Verknüpfung zu einer bestimmten Reihe von Ergebnissen herzustellen. Zu diesem Zweck möchten wir möglicherweise einen neuen URL-Parameter wie hinzufügen können ?q=bender.

Damit dies funktioniert, können Sie diesen URL-Parameter mit Javascript abrufen und diesen Wert verwenden, um unseren queryStatus festzulegen .

Tritt dem Gespräch bei!

Wollten Sie schon immer eine unscharfe, dynamische Suche zu Ihrer @ reactjs-App hinzufügen, wussten aber nicht wie? ?

Diese Anleitung führt Sie durch die Verwendung von Fuse.js, um Ihrer React-App eine leistungsstarke clientseitige Suche hinzuzufügen

Probieren Sie es aus !? // t.co/EMlvXaOCat

- Colby Fayock (@colbyfayock), 26. Mai 2020

Folgen Sie mir für mehr Javascript, UX und andere interessante Dinge!

  • ? Folge mir auf Twitter
  • ? ️ Abonniere mein Youtube
  • ✉️ Melden Sie sich für meinen Newsletter an