Suchfunktion für ungeordnete HTML Liste mit JavaScript?
Hallo,
ich muss eine Aufgabe lösen, bei der ich leider nicht weiter komme. Ich hab eine kleine Homepage mit HTML geschrieben, worauf sich Kurse befinden, die mit einem Link hinterlegt sind. Ich möchte jetzt eine Suchfunktion anlegen um in der ungeordneten Liste an Einträgen schneller auf den gesuchten Eintrag komme. Verwendet werden soll dabei JavaScript.
Hat jemand eine Idee, wie ich das am besten machen kann? Welche Funktion brauche ich dafür?
Beste Grüße
Flo
2 Antworten
Das ginge zum Beispiel so:
listElements = ... //Die Elemente deiner Liste
searchterm = ... //Der Suchbegriff
for(const el of listElements) {
if(!el.textContent.toLowerCase().startsWith(searchterm.toLowerCase())) el.style.display = "none";
else el.style.display = "";
}
Obiger Code blendet alle Listen-Elemente aus, deren Text nicht mit dem Suchbegriff beginnt. Am besten rufst du das ganze bei oninput auf.
Beispiel-Programm: https://jsfiddle.net/h1Lxfgan/1/
Ich würde allen li's eine Klasse geben und dann getElementsByClassName benutzen um über die Elemente zu laufen, dann kannst einfach schauen ob der Text passt.