Frage zum Wiki-Artikel „Suchformulare“

[Rolf B]

Hallo Hubert,

die bisher diskutierte Lösung, die einen Link erzeugt, funktioniert sicherlich. Ich möchte Dir aber auch noch eine Alternative vorstellen, die einfach die existierende PDF Liste filtert. Das setzt voraus, dass die PDFs im HTML als Text vorliegen. Falls die PDF-Liste aus Bildern besteht, müsstest Du die Filterbegriffe in den alt-Attributen der Bilder suchen (alt-Attribute hast Du für Bilder doch, nicht wahr?)

Mein jsFiddle-Beispiel verwendet eine mit display:grid aufgebaute Dokumentenübersicht und hat obendrüber ein Eingabefeld. Tippt man da was ein, bleiben nur die Felder übrig die auf die Eingabe passen. Ich habe mir jetzt keine Mühe gegeben, die Texte im Grid vertikal zu zentrieren...

Das HTML sieht so aus:

<h2>
Rechtschreiben üben
</h2>
<label>Filter: <input id="filter" type="search"></label>
<ul id="themen">
<li>
  <header><span class="stufe">2.-10.</span></header>
  <a href="#">Die 300 häufigsten Fehlerwörter</a>
</li>
<li>
  <header><span class="stufe">2.-10.</span></header>
  <a href="#">Doppelkonsonanten,<br>tz &amp; ck</a>
</li>
<!-- etc etc etc -->
</ul>

Den Header habe ich eingebaut, um deine Kopfzeilen pro Bild zu simulieren. Den Kreis und das Wort neben dem Kreis (das ich im Screenshot nicht entziffern konnte) bringe ich mit CSS hinein. Das Schultafel-Bild würde man als entsprechend positionierten background dem Header hinzufügen.

Die Liste wird mit CSS als responsives Grid gestyled - kann man machen, es gibt auch Alternativen.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(15em, 1fr));
}

li {
  list-style:none;
  margin: 0.3em;
  border-radius: 1em;
  overflow:hidden;
 }

li header {
  background-color: #ff8;
}
li header .stufe {
  display: inline-block; 
  border: 2px solid #844; background-color: #cff;
  border-radius: 1em;
  padding: 0.2em; margin: 0.1em;
  font-size: 1.2rem;
}
li header:after {
  content: " Lernstufe";
  font-size: 0.7rem;
}
li a {
  display: block;
  box-sizing: border-box; 
  width: 100%; height: 5em; padding: 0.5em 1em;
  text-align: center; 
  text-decoration:none;
  background-color: #ffc;
}

li.hidden {
  display:none;
}

Wichtig ist die letzte Regel, die wird zum Ausblenden der Nichttreffer gebraucht.

Das Script ist dann relativ einfach. Ich habe es bei „einfachem“ JS belassen und auf neuere Features wie let, foreach oder map verzichtet.

document.getElementById("filter").addEventListener("input", applyFilter);

function applyFilter(evt) {
   var themes = document.querySelectorAll("#themen li");
   var such = evt.target.value.toLowerCase();
   for (var i=0; i<themes.length; i++) {
      var theme = themes[i];
      var text = theme.querySelector("a").innerText.toLowerCase();
      if (text.indexOf(such) >= 0) {
         theme.classList.remove("hidden");
      }
      else {
      	theme.classList.add("hidden");
      }
   }
}

Das Ganze als JSFiddle. Lässt sich in der Darstellung sicherlich noch aufpimpen, aber darum geht es jetzt ja nicht primär.

Falls dein Raster eine Table ist, funktioniert die Idee natürlich nicht (naja, zumindest sieht's dann hässlich aus). Das ist aus deiner Beispielseite nicht erkennbar. Wenn Du statt Grid mit Flexbox, float oder einfach inline-block divs arbeitest, ist es aber kein Problem.

Rolf