Liste mit URL filtern, ohne Javascript

[Rolf B]

Hallo Michael,

oder anders gesagt: Wenn Du komfortable Webseiten mit hoher Schwuppdizität bauen willst, überwinde deine Abneigung gegen JavaScript.

<label for="filter">Filter: </label><input type="search" id="filter" />
<ul id="linkList">
  <li><a href="...">Alpenhütte</a></li>
  <li><a href="...">Altenheim</a></li>
  <li><a href="...">Altersheim</a></li>
  <li><a href="...">Altglascontainer</a></li>
  <li><a href="...">Altkleider-Container</a></li>
  <li><a href="...">Altstoffsammelzentrum</a></li>
  <li><a href="...">Badeanstalt</a></li>
</ul>

<script>
const filterListe = document.querySelectorAll("#linkList a");

document
	.querySelector("#filter")
	.addEventListener("input", function(inputEvent) {
		const filter = inputEvent.target.value.toLocaleLowerCase("de");
		filterListe.forEach(link => {
			link.parentElement.hidden = !link.textContent.toLocaleLowerCase("de").includes(filter);
		});
	});
</script>

#linkList und #filter sind die IDs der entsprechenden HTML Elemente, die musst Du für deine Zwecke anpassen. Wenn deine Seite nicht nur auf deutsch angezeigt werden kann, muss die locale-Angabe für toLocaleLowerCase flexibler gemacht werden. Wie sich das bei automatischen Übersetzungen verhält, d.h. ob man da überhaupt mitkriegt, dass der Browser übersetzt hat, weiß ich nicht.

Beachte aber, dass eine Liste mit 1000 Einträgen oder so den Browser schon ordentlich ins Schwitzen bringen kann. Verarbeitung größerer Datenmengen gehört eher auf den Server, umfangreichere Suchen gehören in die Datenbank.

@Gunnar: Setzt ein Auto-Übersetzer ein lang-Attribut? Der Browser, hinter dem ich hier hänge, bietet mir gerade die Option nicht an. Wie kriege ich den Wert des für das input geltenden lang-Attributs heraus? element.closest("[lang]").lang? Oder geht das eleganter?

Rolf