Native CSS Search Engine für den Browser

Jets.js
Keine Kommentare

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.

Name Jets.js
Hersteller Denis Lukov
Projektwebsite http://nexts.github.io/Jets.js/
GitHub https://github.com/NeXTs/Jets.js
webinale – the holistic web conference

Diversity matters – Onlinemarketing 2020

mit Astrid Kramer (Astrid Kramer Consulting)

Das Recht auf Privatsphäre – eine Chance für UX

mit Lutz Schmitt (Lutz Schmitt Design & Consulting)

The Revenge of Structured Data

mit Stephan Cifka (Performics Germany GmbH)

IT Security Summit 2020

Zero Trust – why are we having this conversation?

mit Victoria Almazova (Microsoft)

Digitaler Ersthelfer

mit Martin Wundram (DigiTrace GmbH)

Aufmacherbild: Airplanes on airshow. Aerobatic team performs flight at air show von Shutterstock / Urheberrecht: Lucian BOLCA

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -