Jede Website benötigt eine Suchleiste, über die ein Benutzer den Inhalt seines Interesses auf dieser Seite durchsuchen kann. Eine grundlegende Suchleiste kann nur mit HTML, CSS und JavaScript erstellt werden. Fortschrittliche Suchalgorithmen suchen nach vielen Dingen wie verwandten Inhalten und zeigen dann die Ergebnisse an. Derjenige, den wir machen werden, wird nach Teilzeichenfolgen in einer Zeichenfolge suchen.
HTML
In diesem Abschnitt schreiben wir einen HTML-Teil des Codes. In HTML verknüpfen wir einfach unsere Stylesheets und unsere JavaScript-Datei., Input-Tag wird für die Erstellung der Suchleiste verwendet und enthält mehrere Attribute wie Typ, Platzhalter, Name. Wir brauchen auch eine Liste von Elementen, die verschiedene Tiernamen enthalten, mit denen wir dadurch nach Tieren suchen können. Die Klassen und IDs, die in Tags verwendet werden, werden im Stylesheet unten definiert.
Ausgabe:
CSS
Obwohl das obige Eingabe-Tag und die geordnete Liste gut aussehen, muss es noch etwas Styling., Für das Styling der Suchleiste werden Rand und Polsterung hinzugefügt, damit es sauber aussieht. Die Messungen sind in Prozent, so dass es sich anpasst, wenn es in jeder Größe des Bildschirms (Handy, Desktop usw.) verwendet wird. Webkit Transition wird verwendet, um die Breite der Suchleiste beim Klicken zu ändern. Die anfängliche Breite der Suchleiste beträgt 30%, aber wenn Sie darauf klicken, wird sie mit einem einfachen Übergang von 0,15 Sekunden auf 70% geändert.
Ausgabe
Nach dem Hinzufügen von Styling sollte unsere Seite so aussehen.
Hinweis: Wenn sich das Styling Ihrer Seite nicht ändert, stellen Sie sicher, dass der Stil.,css-Datei befindet sich im selben Ordner wie index.HTML.
Es ist immer noch unvollständig, da wir noch das JavaScript benötigen, um die Funktionalität dieser Suchleiste abzuschließen.
JavaScript
Im HTML-Code der Suchleiste gaben wir der Eingabe eine id=“searchbar“ und onkeyup nannten wir die Funktion „search_animal“. onkeyup ruft die Funktion jedes Mal auf, wenn eine Taste auf der Tastatur losgelassen wird.
Wir erhalten zuerst unsere Eingabe mit getElementById. Stellen Sie sicher, dass Sie es in Kleinbuchstaben konvertieren, um Groß-und Kleinschreibung bei der Suche zu vermeiden. Ein Array von Dokumenten wird in x gespeichert. Dies enthält jede Liste mit der id= „animals“., Danach wird eine Schleife ausgeführt, um zu überprüfen, ob innerHTML jedes Dokuments die Eingabeteilzeichenfolge enthält, wenn dies nicht der Fall ist, wird die Anzeigeeigenschaft auf ‚None‘ gesetzt, sodass sie am Frontend unsichtbar ist.
Ausgabe: