This example shows how to use search-menu-ui in conjunction with data-restructor-js as data converter and Elasticsearch as backend.
There are many ways to integrate and design a search UI, this is only one of them.
Notice: It is not recommended to directly access Elasticsearch from the browser. It should be encapsulated and secured within a server application. For fast prototyping and examples like this, it might be handy to directly access it, as long as the HTTP CORS settings work.
The included search-example-servlet shows how to implement a java application using a standard servlet container to integrate elasticsearch into a application like a database.
Notice: This example does not use a bundler and includes all scripts without module system to show, that a minimal-dependencies approach is possible. Both search-menu-ui and data-restructor-js provide built modules and also support the use of bundler.
- Download elasticsearch: https://www.elastic.co/de/downloads/elasticsearch
- Install elasticsearch: https://www.elastic.co/guide/en/elasticsearch/reference/current/install-elasticsearch.html
- (Recommended) Use Visual Studio Code with extension Elasticsearch for VSCode
- (Alternative) All following elasticsearch commands can be executed with any HTTP Client (curl, postman, ...).
- Setup example index "accounts" with the commands listed und described in elasticsearch-accounts.es.
- Setup example index "sites" with the commands listed und described in elasticsearch-sites.es.
- data-restructor-js makes it easy to convert the elasticsearch response to the search menu data structure (see Data Structure Reference).
- The example restruct-data-client.js describes the
expected data and how it should be structured for the search menu. The configured data converter
is then created with
new restruct.DataConverter().createDataConverter(debuMode). - The data converter is attached to the search menu using the SearchMenuAPI as shown in search-binding.js.
The build-in module search-service-client.js contains a very simple yet useable
HTTP client adapter to attach a XMLHttpRequest to the search menu. The example configuration is located inside the search-binding.js. More details can
be found here: search-service-client JSDoc.
Finally everything gets assembled and bound to the HTML for this example inside
search-binding.js. This example mainly uses default
bindings and settings. The only thing that is left is the definition of the modules for the search service, the data converter and the template resolver. addFocusStyleClassOnEveryCreatedElement is additionally used for better browser compatibility (to not depend on CSS :focus selector).
More details and all configuration options can be found here: SearchMenuAPI JSDoc
This project builds upon these great libraries at runtime:
This project is created using these great tools as development dependencies: