In diesem Kapitel lernen wir, wie man mit JS/CSS eine Listensuch- oderFilterfunktion implementiert.
Schauen Sie sich zunächst den Effekt wie folgt an:
Online-Beispiel ansehen:https://c.example.com/codedemo/6227/
Grundlegender HTML-Code
Beispiel
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Suchen..">
<ul id="myUL">
<li><a href="#">Google</a></li>
<li><a href="#">Beispiel</a></li>
<li><a href="#">Taobao</a></li>
<li><a href="#">Wiki</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Zhihu</a></li>
<li><a href="#">Weibo</a></li>
</ul>
Hinweis:Das Beispiel verwendethref="../index.html", um einen Link darzustellen; in tatsächlichen Projekten müssen Sie ihn durch Ihren eigenen Link ersetzen.
Im Folgenden sind die Stile für das Suchfeld und das Vorschlagsmenü:
Beispiel
#myInput {
background-image: url('/css/searchicon.png'); /*Suchschaltfläche hinzufügen*/
background-position: 10px 12px; /*Positionieren Sie die Suchschaltfläche*/
background-repeat: no-repeat; /*Bild nicht wiederholen*/
width: 100%; /*Vollbildanzeige*/
font-size: 16px; /*Schriftgröße*/
padding: 12px 20px 12px 40px; /*Innenabstand festlegen*/
border: 1px solid #ddd; /*Grauen Rahmen hinzufügen*/
margin-bottom: 12px; /*Oberen Außenabstand hinzufügen*/
}
#myUL {
/*Standard-Listenstil entfernen*/
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /*Rahmen zu Links hinzufügen*/
margin-top: -1px; /*Doppelte Rahmen verhindern*/
background-color: #f6f6f6; /*Grauen Hintergrund festlegen*/
padding: 12px; /*Innenabstand hinzufügen*/
text-decoration: none; /*Standard-Unterstreichung entfernen*/
font-size: 18px; /*Schriftgröße festlegen*/
color: black; /*Text auf Schwarz setzen*/
display: block; /*Liste in Blockform füllen*/
}
#myUL li a:hover:not(.header) {
background-color: #eee; /*Hover-Effekt zu allen Links hinzufügen, außer dem Titel*/
}
Der folgende JavaScript-Code ist für das Suchfeld und das Vorschlagsmenü:
Beispiel
function myFunction() {
//Variablen deklarieren
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
//Alle Listenelemente durchlaufen und diejenigen ausblenden, die nicht der Suchanfrage entsprechen
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
Selbst ausprobieren »
Tipp:Wenn Sie eine Suche wünschen, bei der Groß- und Kleinschreibung beachtet wird, können Sie die Methode toUpperCase() entfernen.