Verwenden von MiniSearch in React: Erweiterte Suche und Filterung leicht gemacht

Kapitel Eins
Was ist MiniSearch und wie verbessert es die JavaScript-Filterung?

MiniSearch ist eine leichte JavaScript-Bibliothek für die Volltextsuche in kleinen bis mittleren Datensätzen. Es indiziert Daten und ermöglicht erweiterte Suchfunktionen wie Fuzzy-Matching, Präfixsuche, Rangfolge nach Relevanz und Feldgewichtung.

Und beim Fuzzy-Matching bedeutet Fuzzy-Matching, Wörter oder Wortteile zu finden, auch wenn sie nicht genau richtig eingegeben sind. Wenn Sie beispielsweise „wlf“ anstelle von „Wolf“ eingeben, werden bei einer Fuzzy-Suche immer noch Ergebnisse gefunden, die „Wolf“ enthalten.

Und bei der Präfixsuche sucht die Präfixsuche nach Wörtern oder Teilen am Anfang von etwas. Wenn Sie also nach „Auto“ suchen, würde eine Präfixsuche auch „Warenkorb“ oder „kohlensäurehaltig“ finden.

Diese Funktionen, die uns miniSearch zur Verfügung stellt, helfen uns, das Gesuchte zu finden, auch wenn es nicht perfekt eingegeben ist. Dadurch werden die Suchergebnisse genauer und hilfreicher.

Und warum brauchen wir es?

Der erste Vorteil, den es uns bietet, sind die erweiterten Suchfunktionen:
Herkömmliche Filterung entspricht in der Regel genauen Werten oder Grundmustern. MiniSearch bietet einen anspruchsvolleren Textabgleich. Diese erweiterten Suchfunktionen können Ihre Fehler erraten. Wenn Sie beispielsweise „bak“ statt „back“ eingeben, weiß MiniSearch, was Sie meinen.

Ein weiterer Vorteil gegenüber herkömmlicher Filterung/Suche ist das Relevanzranking:
MiniSearch ordnet Ergebnisse nach Relevanz und verbessert so die Benutzererfahrung in suchintensiven Anwendungen. Dadurch wird sichergestellt, dass die relevantesten Ergebnisse zuerst angezeigt werden. Wenn Sie beispielsweise nach „JavaScript“ suchen, priorisiert das System Dokumente oder Elemente, in denen „JavaScript“ prominent oder häufig erwähnt wird, wodurch das Sucherlebnis insgesamt verbessert wird.

Da wir das nun geklärt haben, erstellen wir eine einfache React.js-Anwendung und sehen, wie wir MiniSearch auf der Clientseite verwenden.

Kapitel Zwei
So richten Sie eine React-App mit MiniSearch ein:

Okay, lass uns unser Projekt einrichten. Und damit wir das Projekt einrichten können, werde ich das stets zuverlässige Vite verwenden. Der Texteditor oder die IDE, die ich verwenden werde, ist der Bösewicht, der Visual Studio-Codeeditor.

Ich werde Vite mit diesen Eingabeaufforderungen im Terminal einrichten. Und ich muss sagen, ich habe diese Ordner bereits zuvor erstellt:

Um in den Ordner „visual_testing“ zu gelangen:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Um in den Ordner „building-in-public-slack“ zu gelangen:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Um in den Minisearch-Ordner zu gelangen:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

Um in den Frontend-Ordner zu gelangen:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

Dann werde ich Vite im Frontend-Ordner installieren, denn dort wollen wir es haben, in unserem Frontend-Ordner.

Ich werde es mit dieser Codezeile installieren:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Dann habe ich Optionen zur Auswahl, ich werde hier Javascript und React verwenden. React als Framework und Javascript als Variante.

Sobald fertig. Ich werde von diesen begrüßt:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Dann werde ich das Minisearch-Paket und das React-Router-Dom-Paket installieren. Allerdings benötige ich das React-Router-Paket in diesem Tutorial nicht:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Wird auch scss installieren, indem dieser Code ausgeführt wird:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

Das wird kein Backend haben. Stattdessen werde ich die Daten irgendwo extern platzieren. Mehr dazu später.

Wenn wir jetzt also unsere kleine App starten, indem wir npm run dev im Terminal ausführen, erhalten wir im Terminal eine Antwort wie diese:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

Wir müssen dem Link (Strg-Klick) folgen:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Wenn wir Strg drücken, klicken Sie auf:

Done. Now run:

 npm install
 npm run dev

Wir werden von einer Seite begrüßt, die im Browser so aussieht:

Kapitel Drei
Reinigen der App.jsx":

Die App.jsx würde zunächst so aussehen:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

Und das ist es, was für das React-Logo und das Vite-Logo verantwortlich ist, die wir im Bild oben gesehen haben. Da wir jedoch nicht mit dem aktuellen Inhalt von App.jsx arbeiten möchten, müssen wir ihn bereinigen. Nach der Bereinigung sollte der Inhalt so aussehen:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

Dadurch wird in unserem Browser ein leerer Bildschirm angezeigt.

Kapitel vier
Vorbereitung des Projekts: Erstellen einer Scheindatenbank:

Normalerweise sollte ich Daten aus einer Datenbank, Superbase, Firebase oder was auch immer erhalten. Oder sogar irgendwo eine API. Ich werde meine Daten aus einer JSON-Datei beziehen. Ich werde es db.json nennen. Die Datei befindet sich in einem Ordner namens data, der sich im Stammverzeichnis unserer Anwendung befinden sollte. Der Inhalt der DB-Datei würde so aussehen:

 VITE v5.4.11  ready in 332 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

Ja! Dein Homeboy ist ein Gamer.???. Und nur um Sie wissen zu lassen, dass ich diese Titel unbedingt spielen möchte.
Lassen Sie mich die Datei nun ganz kurz durchgehen.

Die Datei enthält ein JSON-Objekt mit einem Array von Blogeinträgen. Jedes Objekt stellt ein Videospiel dar und verfügt über die folgenden Felder:

Titel: Der Name des Videospiels.

Text:Eine kurze Beschreibung des Spiels.

Autor: Die Person, die den Blogeintrag geschrieben hat.

id: Eine eindeutige Kennung für jeden Blog-Beitrag. z.B.: „1“, „2“, „3“

Kapitel Fünf
Einrichten eines Mock-Backends mit JSON-Server:

Um die Datenbank zum Laufen zu bringen, müssen wir zu unserem Terminal gehen. Wir können einen anderen Port im Terminal öffnen und diesen Befehl im Terminal ausführen:

http://localhost:5173/

Die Antwort, die wir bekommen werden, ist diese:

http://localhost:5173/

Das bedeutet, dass unser Mock-Server/unsere Mock-Datenbank einsatzbereit ist.

Kapitel Sechs
Erstellen des Frontends: Erstellen der BlogList-Komponente:

Okay! Jetzt gehe ich in den Ordner „src“ und erstelle dort einen Komponentenordner. Im Komponentenordner werde ich einen weiteren Ordner erstellen und ihn „Blog“ nennen. Im Blog-Ordner erstelle ich einen weiteren Ordner mit dem Namen blog-list. Und in diesem Bloglistenordner werde ich zwei Dateien erstellen. BlogList.jsx und BlogList.module.scss. Auf Letzteres möchte ich hier nicht näher eingehen.

Dann legen Sie die BlogList-Komponente wie folgt fest:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Kapitel Sieben
Routing in React: BlogList in App.jsx rendern:

Da wir nun die Grundstruktur unserer BlogList erstellt haben, müssen wir sie mit App.jsx verbinden, damit sie auf dem Bildschirm/Browser gerendert werden kann. Lassen Sie uns dazu in die Datei App.jsx eintauchen und diesen Code schreiben:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Auf das Layout wurde nicht eingegangen, da es hier nicht nützlich ist.

Dann richten wir in main.jsx den Browser-Router dort wie folgt ein:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

Wenn all dies vorhanden ist, ist alles, was in unserer App.jsx passiert, jetzt in unserem Browser/Bildschirm sichtbar.

Kapitel Acht
Zurück zu BlogList.jsx:
Einrichten des Blogs und Ladezustände in BlogList.jsx

Hier werde ich einige Zustände erstellen, mit denen ich arbeiten kann, und auch die Blog-Daten von unserem lokalen Server abrufen, der auf localhost:8000 läuft.

Der erste Status, den ich erstellen werde, ist für Blogs. Es beginnt beim Rendern der App als leeres Array und wird später aktualisiert, wenn wir unsere Blog-Daten vom Mock-Server erhalten.

Dann wird der zweite Status, den ich erstellen werde, zum Laden dienen. Es wird verfolgt, ob die Daten noch geladen werden. Es beginnt mit „false“ und kann beim Abrufen von Daten auf „true“ gesetzt werden.

Sooooooooooooooooo:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

Kapitel Neun
Anzeige der von uns abgerufenen Daten:
Erstellen des Jsx:

Zuerst werde ich die jsx-Komponente aufbauen. Und dafür schreibe ich Folgendes unten im Rückgabeteil auf:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Kapitel Zehn
Anzeige der von uns abgerufenen Daten:
Hier kommt useEffect:

Das bringt nicht viel. Obwohl wir die Daten in unserer Konsole erhalten, werden sie nicht auf dem Bildschirm angezeigt. Und damit es auf dem Bildschirm angezeigt wird, brauchen wir die Hilfe eines der Bösewichte von React, useEffect.

Was ist useEffect?
Laut NetNinja „führt dieser Hook bei jedem Rendern der Komponente eine Funktion aus. Denken Sie daran, dass die Komponente zunächst gerendert wird, wenn sie zum ersten Mal geladen wird, und dies geschieht auch, wenn sich ein Status ändert. Er rendert das DOM erneut, damit es aktualisiert werden kann.“ diesen Zustand (den geänderten Zustand) im Browser".

Sooooooooooooooooo
Die Funktion, die wir zuvor für fetchBlogs geschrieben haben, werden wir in useEffect:
einfügen

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Sieht aus wie der Film „Inception“? Beruhigen Sie sich einfach, ich werde es Ihnen gleich erklären. Nicht der Film Omen, aber Oh! Männer! das ist der Christopher Nolan von Mern {M.E.R.N} genau hier.???

Dann werden wir im Jsx dies dort codieren:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Kapitel Zwölf
So sieht alles mit MiniSearch aus:

Ok, jetzt können wir die Blogs auf unserem Bildschirm rendern. Lassen Sie uns jetzt MiniSearch nutzen. Der gesamte Code sieht folgendermaßen aus:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack> cd .\minisearch\

Dieser Code erstellt eine neue Instanz von MiniSearch, um die Volltextsuche zu ermöglichen. Das macht es:

Felder: Gibt an, welche Felder (Titel, Autor, Text) in den Daten für die Suche indiziert werden.

storeFields: Definiert, welche Felder in die Suchergebnisse einbezogen werden. Diese Felder werden zusammen mit den indizierten Daten gespeichert, um einen einfachen Abruf zu ermöglichen.

Dann das:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch> cd .\frontend\

Dieser Code gibt uns die Gesamtzahl der Dokumente an, die von miniSearch nach dem Rendern der Seite indiziert wurden.

Jetzt gehen wir weiter. Die Seite wird gerendert, und wenn sie gerendert wird, ist der Blogstatus zunächst leer. Das können wir anhand unseres Codes erkennen:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm create vite@latest .

Danach erhalten wir unsere Daten mithilfe der fetchBlogs-Funktion. Da sind tatsächlich Daten vorhanden. Wir wissen, dass es Daten gibt, indem wir diesen Code nachschlagen:

Done. Now run:

 npm install
 npm run dev

Jetzt dieser Code:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install minisearch react-router-dom

Dies wird verwendet, um alle zuvor indizierten Elemente zu entfernen. Dies ist nützlich, wenn Sie neue Daten neu indizieren oder den aktuellen Suchindex löschen müssen. Wir wollen eine saubere Weste haben, also nutzen wir sie.

Dann das:

PS C:\Users\vawkei\Documents\visual_testing\building-in-public-slack\minisearch\frontend> npm install sass

Die Methode miniSearch.addAll(data) fügt alle Elemente im Datenarray zum MiniSearch-Index hinzu.

Nachdem wir die Daten erhalten haben, aktualisieren wir die Blogs, indem wir diesen Code ausführen:

 VITE v5.4.11  ready in 332 ms

 ➜  Local:   http://localhost:5173/
 ➜  Network: use --host to expose
 ➜  press h + enter to show help

Sobald wir den Blog-Status aktualisieren, wird das leere Blog-Array mit unseren Daten gefüllt.

Dabei bereinigen wir unsere miniSearch-Instanz, um Platz für die Indizierung neuer Daten mit diesem Code zu schaffen:

http://localhost:5173/

Und wir fügen die empfangenen Daten hinzu, indem wir diesen Code ausführen:

http://localhost:5173/

Nach alledem sollte unsere miniSearch-Instanz mit Daten geladen sein, ja, das ist sie. Wenn Sie sich diese Codezeile ansehen:

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
           {" "}
      <div>
               {" "}
        <a href="https://vite.dev" target="_blank">
                    <img src={viteLogo} className="logo" alt="Vite logo" />     
           {" "}
        </a>
                <a href="https://react.dev" target="_blank">
                   {" "}
          <img src={reactLogo} className="logo react" alt="React logo" />     
           {" "}
        </a>     {" "}
      </div>
            <h1>Vite + React</h1>      <div className="card">
               {" "}
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}       {" "}
        </button>
                <p>
          Edit <code>src/App.jsx</code> and save to test HMR        {" "}
        </p>     {" "}
      </div>      <p className="read-the-docs">Click on the Vite and React logos to learn more       </p>
    </>
  );
}
export default App;

Es zeigt, dass dort Daten indiziert sind. Beim erneuten Rendern der Seite gehen jedoch die Daten verloren, da miniSearch zurückgesetzt wird. Wir wissen das aufgrund dieses Codes:

function App() {
  return <>     </>;
}

export default App;

Und siehe unten, das ist der eigentliche Inhalt unseres console.log beim Ausführen des Codes beim Rendern.

{
 "blogs": [
 {
 "title": "Wolfenstein",
 "text": "Wolfenstein is a groundbreaking video game series that pioneered the first-person shooter genre. Debuting in 1981, it gained fame with Wolfenstein 3D (1992), placing players in World War II as an Allied spy battling Nazis. Known for its intense gameplay, alternate history, and stealth-action elements, the series continues to evolve with modern reboots and thrilling narratives.",
 "author": "voke",
 "id": "1"
 },
 {
 "title": "Bioshock",
 "text": "BioShock is a critically acclaimed video game series blending first-person shooting with deep storytelling. Set in dystopian worlds like the underwater city of Rapture and floating Columbia, it explores themes of power, morality, and free will. Known for its immersive environments, philosophical depth, and plasmid abilities, BioShock redefined narrative-driven gaming since its debut in 2007.",
 "author": "ese",
 "id": "2"
 },
 {
 "id": "3550",
 "author": "jite",
 "title": "Doom",
 "text": "Doom is a legendary first-person shooter series that revolutionized gaming with its 1993 debut. Players battle demons from Hell across Mars and Earth, armed with iconic weapons like the shotgun and BFG. Known for its fast-paced action, heavy metal soundtrack, and gory visuals, Doom remains a cornerstone of the FPS genre and a cultural phenomenon."
 }
 ]
}

Kapitel Vierzehn
Die Lösung: MiniSearch mit useRef beibehalten:

Um zu verhindern, dass miniSearch bei jedem Rendern zurückgesetzt wird, verschieben wir es in eine useRef, sodass dieselbe Instanz über alle Rendervorgänge hinweg bestehen bleibt. So geht's:

PS C:\Users\vawkei\Documents> cd .\visual_testing\

Dieser Codeblock stellt sicher, dass eine einzelne Instanz von MiniSearch über alle Renderings hinweg mit useRef bestehen bleibt. miniSearchRef erstellt und speichert die MiniSearch-Instanz.

Mit diesem useRef-Code sollten wir zu Hause und im Trockenen sein.

Erklärung der handleSearch-Funktion:

PS C:\Users\vawkei\Documents\visual_testing> cd .\building-in-public-slack\

Die handleSearch-Funktion nimmt alles auf, was der Benutzer eingibt, und aktualisiert die Statusabfrage mit der Eingabe des Benutzers. (Ereignis.Zielwert). Wenn die Eingabe leer ist, wird der Ergebnisstatus gelöscht und die weitere Verarbeitung gestoppt. Anschließend wird miniSearch verwendet, um indizierte Daten mit Fuzzy-Matching zu durchsuchen (leichte Abweichungen sind möglich). Anschließend wird der Status der Ergebnisse aktualisiert.

Kapitel Fünfzehn
Endgültiger Code:
Unser endgültiger Code in BlogList würde also so aussehen:

import { useEffect, useRef, useState } from „react“;
Klassen aus „./BlogList.module.scss“ importieren;
MiniSearch aus „minisearch“ importieren;

const BlogList = () => {
  //Erstelle den Blog und isLoading-Status.
  const [blogs, setBlogs] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  //Erstelle den Abfrage- und Ergebnisstatus.
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  // Überprüfen, ob der Blog-Status gefüllt wurde
  console.log(Blogs);

  const miniSearchRef = useRef(
    neue MiniSuche({
      Felder: ["Titel", "Autor", "Text"], // Felder, nach denen gesucht werden soll
      storeFields: ["title", "author", "text"], // Zurückzugebende Felder
    })
  );
  const miniSearch = miniSearchRef.current;
  console.log("Indizierte Blogs nach dem Rendern:", miniSearch.documentCount);

  //Abrufen der Blogs aus unserer Scheindatenbank:
  const fetchBlogs = async () => {
    setIsLoading(true);

    versuchen {
      const Response =wait fetch("http://localhost:8000/blogs");

      if (!response.ok) {
        throw new Error();
      }

      const data = Warten auf Antwort.json();
      console.log(data);

      miniSearch.removeAll();

      miniSearch.addAll(data);
      console.log("Indexierte Blogs:", miniSearch.documentCount);

      setBlogs(data);
    } Catch (Fehler) {
      const message =
        Fehlerinstanz von Fehler? error.message: „Etwas ist schiefgelaufen“;
      console.log(Nachricht);
    } Endlich {
      setIsLoading(false);
    }
  };

  // die Suchfunktion:
  const handleSearch = (event) => {
    setQuery(event.target.value);

    if (event.target.value.trim() === "") {
      return setResults([]);
    }

    console.log(event.target.value);

    const searchResults = miniSearch.search(event.target.value, { fuzzy: 0.5 });
    console.log("searchResults:", searchResults);
    setResults(searchResults);
  };

  // Bedingte Anzeige von Suchergebnissen oder Blogs
  const displayPosts = results.length > 0 ? Ergebnisse: Blogs;

  useEffect(() => {
    fetchBlogs();
  }, []);

  zurückkehren (
    <div>
            <h2>BlogList</h2>
      {isLoading && <p>Loading...</p>}     {" "}
      <div className={classes.search}>
               {" "}
        <input placeholder="search" value={query} onChange={handleSearch} />     {" "}
      </div>
            <div className={classes.blogs}>
        {displayPosts.map((blog) => {
          // {blogs.map((blog) => {
          zurückkehren (
            <div
              key={blog.id}
              className={classes.blog}
             >



<p><strong>Kapitel Sechzehn</strong><br>
<strong>Ausprobieren:</strong><br>
Wenn ich nun wolfenst eingebe, wird Folgendes angezeigt:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282557470183.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"></p>

<p>Sie können sehen, dass es nicht einmal darauf gewartet hat, dass ich es vollständig buchstabiert habe, bevor ich es herausgefiltert habe.</p>

<p><em>Lassen Sie uns versuchen, Folgendes kritisch zu tippen:</em></p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173282557528617.jpg" alt="Using MiniSearch in React: Advanced Search and Filtering Made Easy"><br>
„Critically“ ist kein Name eines Titels, sondern durchsucht unseren Text und bringt jeden Inhalt zum Vorschein, der das Wort „Critically“ enthält. Und man kann mit Sicherheit sagen, dass Bioshock der einzige Inhalt ist, der kritische Inhalte enthält.</p>

<p><strong>Abschließende Gedanken</strong><br>
Vielen Dank, dass Sie mich auf dieser MiniSearch-Reise begleitet haben! Ich schätze Ihre Zeit und Geduld sehr und hoffe, dass dieser Leitfaden Ihnen dabei geholfen hat, sich zurechtzufinden und zu verstehen, wie Sie MiniSearch effektiv in Ihr Reactjs-Projekt integrieren können.</p>

<p><strong>Über den Autor</strong><br>
Voke Bernard ist ein leidenschaftlicher und engagierter M.E.R.N-Entwickler, der sich auf die Entwicklung dynamischer React.js- und Express.js-Anwendungen spezialisiert hat. Er ist immer auf der Suche nach einer Zusammenarbeit bei neuen Projekten. Melden Sie sich gerne bei uns, wenn Sie Interesse an einer Zusammenarbeit mit ihm haben.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonVerwenden von MiniSearch in React: Erweiterte Suche und Filterung leicht gemacht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!