Das Erstellen einer eigenen Suchleiste mit automatischer Vervollständigung ist einfacher als Sie denken.
Eine Suchleiste ist ein beliebtes UI-Element, das viele moderne Websites verwenden. Wenn Sie eine Website erstellen, die beliebige Daten enthält, möchten Sie möglicherweise, dass Ihre Benutzer nach bestimmten Elementen suchen können.
Es gibt viele Möglichkeiten, wie Sie eine Suchleiste erstellen können. Sie können komplexe Suchleisten erstellen, die Ergebnisse basierend auf mehreren Filtern zurückgeben, z. B. nach Name oder Datum. Vorhandene Bibliotheken können Ihnen helfen, eine Suchleiste zu implementieren, ohne sie von Grund auf neu zu erstellen.
Sie können jedoch auch eine einfache Suchleiste mit Vanilla-JavaScript erstellen, die die Eingabe eines Benutzers mit einer Liste von Zeichenfolgen vergleicht.
So fügen Sie die Benutzeroberfläche für die Suchleiste hinzu
Ihre Website sollte ein Eingabefeld enthalten, in das Ihre Benutzer den Text eingeben können, nach dem sie suchen möchten. Eine Möglichkeit, dies zu tun, besteht darin, ein Eingabe-Tag zu verwenden und es so zu gestalten, dass es wie eine Suchleiste aussieht.
- Erstellen Sie einen Ordner zum Speichern Ihrer Website. Erstellen Sie im Ordner eine HTML-Datei mit dem Namen index.html.
- Füllen Sie Ihre Datei mit der Grundstruktur eines HTML-Dokuments. Wenn Sie mit HTML nicht vertraut sind, gibt es viele HTML-Codebeispiele, die Sie lernen können um Ihnen zu helfen, auf den neuesten Stand zu kommen.
<!doctype html>
<htmllang="de-US">
<Kopf>
<Titel>Suchleiste</title>
</head>
<Körper>
<div-Klasse="Container">
<!-- Inhalt der Webseite kommt hierher-->
</div>
</body>
</html> - Fügen Sie innerhalb der Containerklasse div ein Eingabe-Tag hinzu. Dadurch kann der Benutzer den Text eingeben, nach dem er suchen möchte. Immer wenn sie ein neues Zeichen eingeben, ruft Ihre Website die Funktion search() auf. Sie erstellen diese Funktion in späteren Schritten.
Das Autocomplete-Attribut stellt sicher, dass ein Browser basierend auf früheren Suchbegriffen kein eigenes Dropdown hinzufügt.<div-Klasse="Container">
<h2>Länder suchen</h2>
<Eingabe-ID="Suchleiste" Autovervollständigung="aus" onkeyup="suchen()" Typ="Text"
name="suchen" Platzhalter="Wonach suchst du?">
</div> - Im gleichen Ordner wie deine index.html Datei, erstellen Sie eine neue CSS-Datei mit dem Namen Stile.css.
- Füllen Sie die Datei mit Styling für die gesamte Webseite und die Suchleiste:
Körper {
Rand: 0;
Polsterung: 0;
Hintergrundfarbe: #f7f7f7;
}
* {
Schriftfamilie: "Arial", serifenlos;
}
.Container {
Polsterung: 100px 25%;
Anzeige: Flex;
Biegerichtung: Säule;
Zeilenhöhe: 2rem;
Schriftgröße: 1.2em;
Farbe: #202C39;
}
#Suchleiste {
Polsterung: 15px;
Randradius: 5px;
}
Eingang[typ=text] {
-webkit-Übergang: Breite 00,15 SekLeichtigkeit-in-out;
Übergang: Breite 00,15 SekLeichtigkeit-in-out;
} - In index.html, fügen Sie innerhalb des Head-Tags und unter dem Title-Tag einen Link zu Ihrer CSS-Datei hinzu:
<link rel="Stylesheet" href="Stile.css"> - Öffne das index.html Datei in einem Webbrowser und zeigen Sie die Benutzeroberfläche Ihrer Suchleiste an.
So erstellen Sie die Listenzeichenfolgen für die Suchleiste
Bevor der Benutzer suchen kann, müssen Sie eine Liste verfügbarer Elemente erstellen, nach denen er suchen kann. Sie können dies mit einem Array von Zeichenfolgen tun. Eine Saite ist eine von vielen Datentypen, die Sie in JavaScript verwenden können, und kann eine Folge von Zeichen darstellen.
Sie können diese Liste dynamisch mit JavaScript erstellen, während die Seite geladen wird.
- Innen index.html, fügen Sie unter dem Input-Tag ein div hinzu. Dieses div zeigt ein Dropdown-Menü an, das eine Liste von Elementen enthält, die dem entsprechen, wonach der Benutzer sucht:
<div-id="Liste"></div> - Im gleichen Ordner wie deine index.html Datei und Stile.css Datei, erstellen Sie eine neue Datei mit dem Namen script.js.
- Innen script.js, erstellen Sie eine neue Funktion namens loadSearchData(). Initialisieren Sie innerhalb der Funktion ein Array mit einer Liste von Zeichenfolgen. Beachten Sie, dass dies eine kleine statische Liste ist. Eine komplexere Implementierung muss das Durchsuchen größerer Datensätze berücksichtigen.
FunktionSuchdaten laden() {
// Daten, die in der Suchleiste verwendet werden sollen
lassen Länder = [
'Australien',
'Österreich',
'Brasilien',
'Kanada',
'Dänemark',
'Ägypten',
'Frankreich',
'Deutschland',
'USA',
'Vietnam'
];
} - Rufen Sie innerhalb von loadSearchData() und unter dem neuen Array das div-Element ab, das dem Benutzer die übereinstimmenden Suchelemente anzeigt. Fügen Sie innerhalb des Listen-Div ein Anker-Tag für jedes Datenelement in der Liste hinzu:
// Hole das HTML-Element der Liste
lassen Liste = dokumentieren.getElementById('Liste');
// Füge jedes Datenelement als ein hinzu Schild
Länder.für jede((Land)=>{
lassen ein = dokumentieren.createElement("a");
a.innerText = Land;
a.classList.add("Listenpunkt");
Liste.appendChild (a);
}) - Im Body-Tag von index.html, fügen Sie das Ereignisattribut onload hinzu, um die neue Funktion loadSearchData() aufzurufen. Dadurch werden die Daten geladen, während die Seite geladen wird.
<body onload="loadSearchData()"> - In index.html, fügen Sie vor dem Ende des body-Tags ein script-Tag hinzu, um es mit Ihrer JavaScript-Datei zu verknüpfen:
<body onload="loadSearchData()">
<!-- Inhalt Ihrer Webseite -->
<script src="script.js"></script>
</body> - In Stile.css, fügen Sie der Dropdown-Liste ein Styling hinzu:
#Liste {
Rand: 1px durchgehend hellgrau;
Randradius: 5px;
Bildschirmsperre;
}
.Listenpunkt {
Anzeige: Flex;
Biegerichtung: Säule;
Textdekoration: keine;
Polsterung: 5px 20px;
Farbe: Schwarz;
}
.Listenpunkt:schweben {
Hintergrundfarbe: hellgrau;
} - Offen index.html in einem Webbrowser, um Ihre Suchleiste und die Liste der verfügbaren Suchergebnisse anzuzeigen. Die Suchfunktion funktioniert noch nicht, aber Sie sollten die Benutzeroberfläche sehen, die sie verwenden wird:
So erstellen Sie das Dropdown mit übereinstimmenden Ergebnissen in der Suchleiste
Nachdem Sie nun über eine Suchleiste und eine Liste mit Zeichenfolgen verfügen, die Benutzer durchsuchen können, können Sie die Suchfunktion hinzufügen. Während der Benutzer etwas in die Suchleiste eingibt, werden nur bestimmte Elemente in der Liste angezeigt.
- In Stile.css, ersetzen Sie das Styling für die Liste, um die Liste standardmäßig auszublenden:
#Liste {
Rand: 1px durchgehend hellgrau;
Randradius: 5px;
Anzeige: keine;
} - In script.js, erstellen Sie eine neue Funktion namens search(). Denken Sie daran, dass das Programm diese Funktion jedes Mal aufruft, wenn der Benutzer ein Zeichen in die Suchleiste eingibt oder daraus entfernt. Einige Anwendungen benötigen Reisen zu einem Server, um Informationen abzurufen. In solchen Fällen könnte diese Implementierung Ihre Benutzeroberfläche verlangsamen. Möglicherweise müssen Sie die Implementierung ändern, um dies zu berücksichtigen.
Funktionsuchen() {
// Die Suchfunktion gehört hierher
} - Rufen Sie in der Funktion search() das HTML-Div-Element für die Liste ab. Rufen Sie auch die HTML-Anchor-Tag-Elemente jedes Elements in der Liste ab:
lassen listContainer = dokumentieren.getElementById('Liste');
lassen listItems = dokumentieren.getElementsByClassName('listItem'); - Holen Sie sich die Eingabe, die der Benutzer in die Suchleiste eingegeben hat:
lassen Eingabe = dokumentieren.getElementById('Suchleiste').value
input = input.toLowerCase(); - Vergleichen Sie die Eingabe des Benutzers mit jedem Element in der Liste. Wenn der Benutzer beispielsweise „a“ eingibt, vergleicht die Funktion, ob „a“ innerhalb von „Australien“ liegt, dann „Österreich“, „Brasilien“, „Kanada“ und so weiter. Wenn es übereinstimmt, wird es dieses Element in der Liste anzeigen. Wenn es nicht übereinstimmt, wird dieses Element ausgeblendet.
lassen keineErgebnisse = WAHR;
für (i = 0; ich < listItems.length; i++) {
if (!listItems[i].innerHTML.toLowerCase().includes (input) || input "") {
listItems[i].style.display="keiner";
weitermachen;
}
anders {
listItems[i].style.display="biegen";
keineErgebnisse = FALSCH;
}
} - Wenn überhaupt keine Ergebnisse in der Liste vorhanden sind, blenden Sie die Liste vollständig aus:
listContainer.style.display = keine Ergebnisse? "keiner": "Block"; - Klick auf das index.html Datei, um sie in einem Webbrowser zu öffnen.
- Beginnen Sie mit der Eingabe in die Suchleiste. Während Sie tippen, wird die Ergebnisliste aktualisiert, um nur übereinstimmende Ergebnisse anzuzeigen.
Verwenden einer Suchleiste, um nach übereinstimmenden Ergebnissen zu suchen
Nachdem Sie nun wissen, wie Sie eine Suchleiste mit Zeichenfolgenauswahl erstellen, können Sie weitere Funktionen hinzufügen.
Beispielsweise können Sie Links zu Ihren Anker-Tags hinzufügen, um je nach Ergebnis, auf das der Benutzer klickt, verschiedene Seiten zu öffnen. Sie können Ihre Suchleiste ändern, um komplexere Objekte zu durchsuchen. Sie können den Code auch so ändern, dass er mit Frameworks wie React funktioniert.