JavaScript

Selbst gecodete und konfigurierte UI-Widgets für Suchanfragen und -ergebnisse erstellen

instantsearch.js – JavaScript-Bibliothek für Instant-Search-UIs
Keine Kommentare

instantsearch.js von Algolia stellt Entwicklern eine umfangreiche JavaScript-Bibliothek zum einfachen Erstellen verschiedener Instant-Search-UI-Widgtes zur Verfügung. Egal ob Medienbibliothek oder E-Commerce-Shop, instantsearch.js soll ansehnliche UIs mit selbst gecodeten und konfigurierten Widgets ermöglichen.

Das Instant-Search-Feature ist eine beliebte Funktion, um den Inhalt von Websites für den Nutzer komfortabel durchsuchbar zu machen und ihn schnell zum Ziel zu führen. Schon mit dem ersten getippten Buchstaben oder Wortfragment werden gleichzeitig Treffer ausgeworfen. Die Ergebnisseiten solcher Instant-Search-Anfragen setzen sich häufig aus Widgets, also UI-Komponenten für den Input und Output zusammen.

Das von den Franzosen Nicolas Dessaigne und Julien Lemoine 2012 gegründete und in San Francisco beheimatete Startup Algolia bietet einen Web-Search-Service als SaaS-Modell an. Mit instantsearch.js stellt Algolia Website-Betreibern darüber hinaus eine ReactJS-basierte JavaScript-Bibliothek Open Source zur Verfügung, mit der sich individuell anpassbare Such-Interfaces mithilfe von Algolias Hosted-Search-API bauen lassen. Unterstützt wird nahezu jede Sprache, Tippfehler werden toleriert und entsprechend verarbeitet.

Funktionsumfang

  • eine umfangreiche Widget-Bibliothek für individuelle Search-Experience
  • Entwickler können eigene Widgets coden und so an ihre Vorstellungen anpassen
  • das gesamte Paket befindet sich in einer Bibliothek – instantsearch.js verbindet die einzelnen Elemente der Search-Page
  • das modulare Design von instantsearch.js ermöglicht individuelle UIs; Widgets lassen sich konfigurieren und anpassen

So lassen sich Medienbibliotheken zum Browsen von Videos oder Musik erstellen. Ebenso E-Commerce-Stores oder Tourismus-Interfaces für sofortige Ergebnisse. Beispiele finden sich auf GitHub.

instantsearch.js Widgets

Die durch instantsearch.js erstellte Suchergebnisseite besteht aus individuellen Komponenten, den Widgets. Die Widgets sind UI-Komponenten für die Sucheingabe (Suchmaske, Filter, etc.) oder die Suchergebnisausgabe (die tatsächlichen Resultate). Jedes Widget ist unabhängig und die Art und Weise wie sie gerendert werden, ist von der Suchanfrage abhängig. Grundsätzlich folgen die Widgets dem instantsearch.js-Lifecycle:

  • Konfiguration: jedes Widget fügt dem darunter liegenden Algolia API-Client neue Query-Parameter hinzu
  • initiales Rendering: vor der ersten Suche aktualisiert das Widget gegebenenfalls das UI
  • Rendering: bei jeder Suchanfrage, nachdem die Ergebnisse von Algolia eintreffen, aktualisieren sich die Widgets selbstständig

Für das Setup von instantsearch.js via CDN oder NPM sowie für das Erstellen eigener Widgets empfehlen wir die ausführliche Dokumentation für instantsearch.js auf GitHub.

Name instantsearch.js
Hersteller Algolia
Projektwebsite https://community.algolia.com/instantsearch.js/
GitHub https://github.com/algolia/instantsearch.js
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 -