Im Zuge der Arbeiten an Turboblog setzte ich mich zum ersten Mal richtig mit jQuery auseinander. Zuvor hab ich vor allem mit prototypejs gearbeitet. Dieses Projekt schien jetzt aber schon längere Zeit eingefroren zu sein, obwohl man jetzt wieder ein Lebenszeichen von sich gegeben hat. Zusätzlich bietet jQuery mittlerweile auch wesentlich mehr PlugIns und Addons als Prototype.

Wie gesagt findet dieser Code Anwendung im Turboblog. Die Navigation ist eine einfache Liste der einzelnen Turbos. Eine Filterfunktion dafür schien passend um einfach zu älteren Seiten gelangen zu können. Da für die Darstellung der Liste schon sämtliche Daten im Browser geladen sind, ist eine AJAX Lösung, die immer individuell für jede Filtereingabe die passenden Daten liefert, überflüssig. Den Code habe ich minimiert so gut es ging. Da ich mich aber noch nicht als jQuery Profi sehe, gibt es sicher noch Verbesserungspotential.

Der Filter besteht aus einem Textinputfeld und einem Container div-Tag in dem sich weitere div-Tags als Listelement Container befinden:

<input type="text" id="filter" />
<div id="list">
  <div class="entry" title="inhalt a">inhalt a</div>
  <div class="entry" title="inhalt b">inhalt b</div>
  ...
</div>

Die gefilterte Info wird hier im Titel-Attribut geführt. Das Script kann aber auch ohne größere Änderungen so geändert werden, dass der Textinhalt des Containertags gefiltert wird.

Alles was jetzt noch zu tun ist: bei Änderungen im Textfeld die entsprechende Listenelemente anzuzeigen, dies wird mit diesem JavaScript Code erledigt.

$("#list").children("div.entry").each(function(){
  $(this).attr("title").toLowerCase().indexOf($("#filter").val().toLowerCase())&gt;-1?$(this).show():$(this).hide()
})

Hier werden mit den jQuery Selektoren, sämtliche Elemente aus dem DOM heraus geholt und entsprechend ihres Titel Attributes angezeigt oder versteckt. Bei dieser Lösung wird mittels der standard JavaScript String “toLowerCase” funktion garantiert, dass groß und klein Schreibung keine Auswirkung auf die Ergebnisse haben.

Es wäre hier auch eine Lösung die nur mit jQuery Selektoren arbeitet, statt dem vorhergehenden JavaScript Code könnte auch folgender verwendet werden, der aber casesensitive agiert.

$("#list").children("div.entry[title~='" + $("#filter").val() + "']").each(function(){$(this).show()});
$("#list").children("div.entry[title!='" + $("#filter").val() +  "']").each(function(){$(this).hide()});

Ein Beispiel gibts hier im Lab. Den Sourcecode als Download hier.

Habt ihr irgendwelchen anderen Lösungsansätze? Verbesserungsvorschläge oder Einwände. Kommentare und Anregungen sind gerne willkommen.