Wie implementiert man eine Suchfunktion in einer JavaScript-Anwendung?
19/03/2024
•
5
min
Die Implementierung einer Suchfunktion innerhalb einer JavaScript-Anwendung besteht im Allgemeinen aus den folgenden Schritten:
Schritt 1: Erstellen Sie ein einfaches Suchfeld in Ihrer HTML-Webseite.
Schritt 2: Parsen Sie Ihre Datenquelle, um einen durchsuchbaren Index zu erstellen.
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Schritt 3: Fügen Sie einen Event-Handler zum 'Suchen' -Button hinzu, der eine Suchlogik verwendet, um nach dem bereitgestellten Suchbegriff in Ihrem Index zu suchen und die Ergebnisse liefert.
Lassen Sie uns das Schritt für Schritt klären.
Schritt 1: Erstellen Sie ein einfaches Suchfeld in Ihrer HTML-Webseite.
<!DOCTYPE html>
<html>
<head>
<title>Einfache Suchanwendung</title>
</head>
<body>
<input type="text" id="search-text" placeholder="Eingabe zum Suchen...">
<button onclick="performSearch()">Suchen</button>
<ul id="results">
</ul>
</body>
</html>
In dem obigen HTML-Code haben wir eine einfache Eingabe vom Typ Text erstellt, um Benutzersuchanfragen anzunehmen. 'search-text' ist die id des Eingabefelds, die wir verwenden werden, um Benutzereingaben mit JavaScript zu holen. Das Attribut 'onclick' des Buttons ruft die Funktion 'performSearch()' auf, wenn der Button geklickt wird.
Schritt 2: Implementieren Sie die Suchfunktion. In der Regel würde man die Datenquelle parsen und einen Index erstellen, um die Suchfunktion effizient zu gestalten. Aber wegen Einfachheit sollten wir ein Array von Strings in Betracht ziehen, das wir suchen möchten.
Schritt 3: Erstellen Sie ein neues Skript-Tag, das folgenden JavaScript-Code enthält:
<script>
var data = [
"hallo",
"auf Wiedersehen",
"ja",
"nein",
"gut",
"schlecht"
]; // unser Array von Daten. Dies könnte alles sein (könnte von einer API abgerufen werden)
function performSearch() {
// frühere Ergebnisse löschen
document.getElementById('results').innerHTML = '';
var searchText = document.getElementById('search-text').value;
for(var i = 0; i < data.length; i++) {
// sehen Sie, ob der Suchtext irgendwo in dieser Zeichenkette ist
if(data[i].toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
// wenn ja, fügen Sie dieses Element den Ergebnissen hinzu
var li = document.createElement('li');
li.textContent = data[i];
document.getElementById('results').appendChild(li);
}
}
}
</script>
In dem obigen JavaScript-Code:
- Wir deklarieren ein Array 'data', das die Elemente enthält, die wir durchsuchen möchten.
- Die Funktion 'performSearch()' ist mit dem 'Suchen' -Knopf verknüpft, den wir im Schritt 1 erstellt haben. Wenn der 'Suchen' -Knopf geklickt wird, löscht es alle vorherigen Suchergebnisse, ruft den aktuellen Suchbegriff aus dem Textfeld ab, sucht nach Elementen in den 'Daten', die den Suchbegriff enthalten und zeigt die Ergebnisse im HTML an.
Dies ist eine einfache Möglichkeit, eine Suchfunktion zu einer JavaScript-Anwendung hinzuzufügen. Dieses Beispiel funktioniert bei einer einfachen Liste von Strings. Für komplexere Daten wie JSON-Objekte, benötigen Sie eine ausgefeiltere Methode zum Indizieren und Durchsuchen Ihrer Daten.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.