Jets.js - Native CSS Search Engine für den Browser

Native CSS Search Engine für den Browser

Jets.js

Vielen Entwicklern dürfte das folgende Szenario bekannt sein: das HTML-Markup ihrer Seite rendert Backend-seitig und beinhaltet dabei ein mehr oder minder großes Datenset. Will man diese Liste durchsuchen, stehen Entwickler verschiedene Methoden für die Implementierung einer Suchfunktion zur Verfügung, die – je nach Umfang der Datenliste – durchaus einige Zeit in Anspruch nehmen kann.

Besonders einfach lässt sich eine solche Suche mit der von Denis Lukov entwickelten nativen CSS Search Engine Jets.js einbinden. Die Idee hinter dem Tool ist simpel: es soll während des Filterns nicht jedes Attribut jedes Tags beeinflussen; stattdessen wird nur im <style>-Tag eine dynamische CSS-Regel angewandt, anhand der der Browser entscheidet, welche Einträge in der Liste angezeigt oder versteckt werden.

Der besondere Vorteil von Jets.js liegt dabei auf der Hand. Da es sich um reines CSS handelt, kann das Tool auf jedes Tag angewandt werden – egal, ob es sich dabei um eine geordnete oder ungeordnete Liste, ein <div> oder ein Tabellen-Tag handelt.

Installation und Nutzung

Die Installation der nativen CSS Search Engine ist denkbar einfach: sie kann entweder mit Bower oder npm installiert werden; alternativ steht sie auf GitHub zum Download zur Verfügung. Das Tool kommt zudem mit allerhand verschiedener Optionen und Methoden daher, die es Usern ermöglichen, die CSS Search Engine an ihre eigenen Bedürfnisse anzupassen. Sie sind übersichtlich auf der Produkt-Website zusammengefasst.

Der Browser-Support von Jets.js umfasst alle modernen Browsern, den Internet Explorer ab Version 9 sowie zahlreiche Mobile-Browser. Aktuell steht Version 0.1.0 des Tools zur Verfügung; mehr Informationen dazu finden sich entweder auf GitHub oder der Produktseite. Dort gibt es auch eine Demo-Version, die das Tool in Aktion zeigt.