Suchleisten sind eine großartige Möglichkeit, Benutzern dabei zu helfen, das zu finden, was sie auf Ihrer Website benötigen. Sie eignen sich auch gut für Analysen, wenn Sie verfolgen, wonach Ihre Besucher suchen.
Sie können React verwenden, um eine Suchleiste zu erstellen, die Daten filtert und anzeigt, während der Benutzer tippt. Mit React-Hooks und den JavaScript-Map- und Filter-Array-Methoden ist das Endergebnis ein reaktionsschnelles, funktionales Suchfeld.
Erstellen der Suchleiste
Die Suche nimmt Eingaben von einem Benutzer entgegen und löst die Filterfunktion aus. Du kannst Verwenden Sie eine Bibliothek wie Formik, um Formulare in React zu erstellen, aber Sie können auch eine Suchleiste von Grund auf neu erstellen.
Wenn Sie kein React-Projekt haben und mitmachen möchten, erstellen Sie eines mit dem Befehl create-react-app.
npx erstellen-reagieren-app suchen-Bar
Im App.js Datei, fügen Sie das Formularelement einschließlich des Eingabe-Tags hinzu:
ExportStandardFunktionApp() {
zurückkehren (
<div>
<form>
<Eingabetyp="suchen"/>
</form>
</div>
)
}
Sie sollten die verwenden useStateHaken reagieren und das bei Änderung Ereignis zur Steuerung der Eingabe. Importieren Sie also useState und ändern Sie die Eingabe, um den Statuswert zu verwenden:
importieren { useState } aus "Reagieren"
ExportStandardFunktionApp() {
const [Abfrage, SetAbfrage] = useState('')
konst handleChange = (e) => {
Abfrage(e.Ziel.Wert)
}
zurückkehren (
<div>
<form>
<Eingabetyp="suchen" value={query} onChange={handleChange}/>
</form>
</div>
)
}
Jedes Mal, wenn ein Benutzer etwas in das Eingabeelement eingibt, handleChange aktualisiert den Zustand.
Filtern der Daten bei Eingabeänderung
Die Suchleiste sollte eine Suche mit der vom Benutzer bereitgestellten Abfrage auslösen. Das bedeutet, dass Sie die Daten innerhalb der handleChange-Funktion filtern sollten. Sie sollten auch die gefilterten Daten im Status verfolgen.
Ändern Sie zuerst den Status, um die Daten einzuschließen:
konst [state, setstate] = useState({
Anfrage: '',
Liste: []
})
Das Bündeln der Statuswerte auf diese Weise, anstatt einen für jeden Wert zu erstellen, reduziert die Anzahl der Renderings und verbessert die Leistung.
Die Daten, die Sie filtern, können alle Daten sein, die Sie durchsuchen möchten. Sie können beispielsweise eine Liste mit Beispiel-Blogbeiträgen wie diese erstellen:
konst Beiträge = [
{
URL: '',
Stichworte: ['reagieren', 'bloggen'],
Titel: „Wie erstellen eine Reaktion suchen Bar',
},
{
URL:'',
Stichworte: ['Knoten','äußern'],
Titel: 'So simulieren Sie API-Daten in Node',
},
// mehr Daten hier
]
Du kannst auch Rufen Sie die Daten über eine API ab aus einem CDN oder einer Datenbank.
Ändern Sie als Nächstes die Funktion handleChange(), um die Daten zu filtern, wenn der Benutzer etwas in die Eingabe eingibt.
konst handleChange = (e) => {
konst Ergebnisse = posts.filter (post => {
if (e.zielwert.wert "") Beiträge zurückgeben
zurückkehrenPost.Titel.toLowerCase().beinhaltet(e.Ziel.Wert.toLowerCase())
})
setstate({
Anfrage: e.Ziel.Wert,
Liste: Ergebnisse
})
}
Die Funktion gibt die Beiträge zurück, ohne sie zu durchsuchen, wenn die Abfrage leer ist. Wenn ein Benutzer eine Suchanfrage eingegeben hat, wird überprüft, ob der Beitragstitel den Suchanfragentext enthält. Durch die Umwandlung des Beitragstitels und der Abfrage in Kleinbuchstaben wird sichergestellt, dass beim Vergleich die Groß-/Kleinschreibung nicht beachtet wird.
Sobald die Filtermethode die Ergebnisse zurückgibt, aktualisiert die handleChange-Funktion den Status mit dem Abfragetext und den gefilterten Daten.
Anzeigen der Suchergebnisse
Das Anzeigen der Suchergebnisse beinhaltet das Durchlaufen des Listenarrays mithilfe von Karte Methode und Anzeigen der Daten für jedes Element.
ExportStandardFunktionApp() {
// state- und handleChange()-Funktion
zurückkehren (
<div>
<form>
<input onChange={handleChange} value={state.query} type="suchen"/>
</form>
<Ul>
{(Zustand.Abfrage ''? "": state.list.map (post => {
zurückkehren <li key={post.title}>{post.title}</li>
}))}
</ul>
</div>
)
}
Innerhalb des ul-Tags prüft die Komponente, ob die Abfrage leer ist. Wenn dies der Fall ist, wird eine leere Zeichenfolge angezeigt, da dies bedeutet, dass der Benutzer nach nichts gesucht hat. Wenn Sie eine Liste von Elementen durchsuchen möchten, die Sie bereits anzeigen, entfernen Sie dieses Häkchen.
Wenn die Abfrage nicht leer ist, durchläuft die map-Methode die Suchergebnisse und listet die Beitragstitel auf.
Sie können auch ein Häkchen hinzufügen, das eine hilfreiche Meldung anzeigt, wenn die Suche keine Ergebnisse liefert.
<Ul>
{(Zustand.Abfrage ''? "Keine Beiträge stimmen mit der Suchanfrage überein": !Zustand.Listenlänge? "Ihre Abfrage hat keine Ergebnisse zurückgegeben": state.list.map (post => {
zurückkehren <li key={post.title}>{post.title}</li>
}))}
</ul>
Das Hinzufügen dieser Nachricht verbessert die Benutzererfahrung, da der Benutzer nicht auf ein leeres Feld schauen muss.
Umgang mit mehr als einem Suchparameter
Sie können React-Status und -Hooks zusammen mit JavaScript-Ereignissen verwenden, um ein benutzerdefiniertes Suchelement zu erstellen, das ein Datenarray filtert.
Die Filterfunktion prüft nur, ob die Abfrage mit einer Eigenschaft – Titel – in den Objekten innerhalb des Arrays übereinstimmt. Sie können die Suchfunktion verbessern, indem Sie den logischen OR-Operator verwenden, um die Abfrage mit anderen Eigenschaften im Objekt abzugleichen.