<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" > <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <title>Suchen und Filtern</title>

<style> body {

 max-width: 50em;
 background: black;
 color: white !important;

} img {

 max-width: 50%;
 float: right;
 margin: 0 0 1em 1em;

} h1 {

 color: gold;

} article {

 padding: 1em;

} article:after { /*clearfix */

 content: "";
 display: block;
 clear: both;

} .active {

 background: #337599;

} .is-hidden {

 display: none;

} </style>

 document.addEventListener('DOMContentLoaded', function () {

 // Das Formular, das Suchfeld und alle Artikel werden einmalig gesucht.
 const searchForm = document.querySelector('form');
 const searchInput = document.querySelector('#search');
 const articles = document.querySelectorAll('article');

 // Suchtexte werden vereinheitlicht: Leerzeichen am Rand entfernen und Kleinschreibung nutzen.
 function normalize(text) {
   return text.trim().toLocaleLowerCase('de-DE');
 }

 // Für jeden Artikel wird ein kompletter Suchtext zusammengestellt.
 function getSearchText(article) {
   // Die Alternativtexte der Bilder werden gesammelt, damit auch Bildinhalte gefunden werden können.
   let imageTexts = Array.from(article.querySelectorAll('img'))
     .map(function (image) {
       return image.alt;
     })
     .join(' ');

   // Die Artikel-ID, der sichtbare Text und die Alternativtexte bilden zusammen die Suchbasis.
   return normalize(article.id + ' ' + article.innerText + ' ' + imageTexts);
 }

 // Alle Artikel werden anhand des aktuellen Suchbegriffs ein- oder ausgeblendet.
 function filterArticles() {
   // Auch die Eingabe aus dem Suchfeld wird vor dem Vergleich vereinheitlicht.
   let searchQuery = normalize(searchInput.value);

   articles.forEach(function (article) {
     // Ohne Suchbegriff bleiben alle Artikel sichtbar.
     // Sonst bleibt nur sichtbar, was den Suchbegriff in der Suchbasis enthält.
     let isRelevant = !searchQuery || getSearchText(article).includes(searchQuery);
     article.classList.toggle('is-hidden', !isRelevant);
   });
 }

 // Beim Tippen wird die Suche leicht verzögert, damit nicht nach jedem Tastendruck sofort gefiltert wird.
 let typingTimer;
 let typeInterval = 500;

 // Neue Eingaben brechen eine noch wartende Suche ab und starten die Suche neu.
 function queueFilter() {
   clearTimeout(typingTimer);

   // Wenn das Suchfeld leer ist, werden alle Artikel sofort wieder angezeigt.
   if (!normalize(searchInput.value)) {
     filterArticles();
     return;
   }

   // Bei normaler Eingabe wird erst nach einer kurzen Pause gesucht.
   typingTimer = setTimeout(filterArticles, typeInterval);
 }

 // Das input-Ereignis erfasst Tippen, Einfügen und viele Browseraktionen im Suchfeld.
 searchInput.addEventListener('input', queueFilter);
 // Das change-Ereignis erfasst unter anderem die Auswahl aus der Datalist.
 searchInput.addEventListener('change', filterArticles);
 // Das search-Ereignis erfasst das Leeren über das Kreuz im Suchfeld, wo der Browser es anbietet.
 searchInput.addEventListener('search', filterArticles);

 // Das Formular soll die Seite nicht neu laden, sondern nur die vorhandene Live-Suche ausführen.
 searchForm.addEventListener('submit', function (event) {
   event.preventDefault();
   filterArticles();
 });

}); </script> </head>

<body>

Suchen und Filtern

 <label for="search">Vogelpark</label>
 <input type="search" id="search" list="vogelparks">
 <datalist id="vogelparks">
   <option value="de10319">10319 Berlin</option>
   <option value="de10787">10787 Berlin</option>
   <option value="de14109">14109 Berlin</option>
   <option value="de15837">15837 Baruth/Mark</option>
   <option value="de16225">16225 Eberswalde</option>
   <option value="de17373">17373 Ueckermünde</option>
   <option value="de17489">17489 Greifswald</option>
   <option value="de18273">18273 Güstrow</option>
   <option value="de18337">18337 Marlow</option>
   <option value="de19061">19061 Schwerin</option>
 </datalist>

</form>