zurück zum Artikel

Mit der Library Search UI können Entwickler Nutzerschnittstellen für die Suche nicht nur mit Elasticsearch erstellen.

Das vor allem auf Tools rund um Suchanfragen spezialisierte Unternehmen Elastic hat Search UI 1.0 veröffentlicht. Mit der quelloffenen JavaScript-Library können Entwickler Nutzerschnittstellen für die Suche erstellen. Auch wenn die Bibliothek in erster Linie auf Elastic App Search und Elastic Site Search ausgelegt ist, lässt sie sich wohl mit beliebigen Backends für die Suche verwenden.

Search UI baut auf Facebooks Library React auf und bringt zahlreiche Standardkomponenten für das Durchführen und Anpassen von Suchanfragen und das Anzeigen der Ergebnisse mit. Neben einer Search-Leiste bietet es Autovervollständigung, Suchvorschläge und Ergebnisseiten mit dynamischen Filtern.

Die Bibliothek kann Resultate hervorheben und Suchergebnisse anzeigen, während Nutzer ihre Anfrage ins Suchfeld tippen. Sie automatisiert die Sortierung und das Aufteilen der Ergebnisse in Seiten. Darüber hinaus erstellt die Library aus den Ergebnissen eindeutige URLs zum Speichern oder Teilen der Anfrage und der Filter.

Flexible Anbindung an Frameworks und Search-Backends

Elastic hat die Library vor allem mit dem Fokus auf einfache Integration und Flexibilität entwickelt. So sind vorgefertigte Komponenten in React umgesetzt, aber Search UI soll mit beliebigen JavaScript-Frameworks zusammenarbeiten. Oberflächen für Suchanfragen lassen sich wohl mit wenigen Codezeilen erstellen. Für Elastic App Search und Elastic Site Search existieren vorgefertigte Konnektoren, aber Search UI lässt sich auch mit anderen Suchwerkzeugen im Backend verwenden.

Search UI setzt für das Erstellen von Oberflächen auf fünf Ebenen:

• Eine API zur Anbindung an das Backend für die Suche,
• einen Konnektor, der festlegt, wie die Library mit der Search-API kommuniziert,
• einen SearchProvider als oberste Komponente der Search-UI-Implementierung,
• interaktive Komponenten mit weitgehend selbsterklärenden Namen wie SearchBox oder Results, die jeweils Kindobjekte von SearchProvider sind und
• Styles und Layouts, die als CSS beziehungsweise angepasste Layout-Komponente umgesetzt sind.

Im GitHub-Repositoy finden sich Codebeispiele, die den Einstieg vereinfachen sollen. Außerdem hat Elastic eine Spielwiese auf CodeSandbox [1] erstellt, mit der Entwickler interaktiv eine Suchoberfläche mit einem vorgegebenen Konnektor zu einer Datenbasis erstellen können.

Weitere Details lassen sich dem Elastic-Blog [2] entnehmen. Der Sourcecode des Open-Source-Projekts ist unter Apache-2-Lizenz auf GitHub zu finden [3]. (rme [4])

URL dieses Artikels:
https://www.heise.de/-4472837

Links in diesem Artikel:
[1] https://codesandbox.io/s/national-parks-example-kdyms?fontsize=14
[2] https://www.elastic.co/de/blog/search-ui-1-0-0-released
[3] https://github.com/elastic/search-ui
[4] mailto:rme@ix.de

Copyright © 2019 Heise Medien