How to implement search as you type feature withSpring Boot and Elasticsearch?
In this tutorial, we will see how to implement a search as you type feature using Spring Boot and Elasticseach. Elastic nodes will be created using a docker-compose.yml file. Also, a simple Angular application is added so that we can see the feature in action.
To get a running environment, I will use Docker Desktop for Windows (when Docker Desktop is installed, you will have Docker Engine, Docker CLI client and Docker Compose), Spring Tool Suite (STS), GitBash, Visual Studio Code, Postman and Kibana (developer tools) on a Windows 10 machine.
We will have 4 steps. Firstly, we will create a Elasticsearch cluster using docker-compose.yml file. The next step will be creating a sample index and posting sample documents into Elasticsearch. Then we will create a Spring Boot application. This application will be querying Elasticsearch cluster and expose some APIs. Lastly, an Angular application will present the search as you type feature in action.
Step 1: Create a Elasticsearch cluster
I used a ready-to-use docker-compose.yml file which is created by Elastic itself. If you want to go in details, you can visit https://www.elastic.co/guide/en/elasticsearch/reference/current/docker.html. You can also get the docker file from here, https://github.com/horasan/3-product-menu-app/blob/main/docker-compose.yml.
Create a directory for this tutorial and copy the docker-compose.yml file in it. Go to the directory in GitBash and run docker-compose up command (in my case it took 5 minutes to get a running Elastic cluster).
You can check the containers using docker compose ps. You should see all the containers are in running status.
As you can see in the docker-compose.yml file, a node (es01) is exposing port 9200. We can use this port to query Elasticsearch. Open Postman and make a GET request to http://localhost:9200/_cat/nodes?v&pretty as follows. You should see all 3 nodes in the response.
Now we have a running Elasticsearch cluster with 3 nodes which can be queried on port 9200.
Step 2: Create an index and post some documents.
When you run docker compose ps command (in the docker-compose.yml file folder), you notice that there is a service called “kib01” on port 5601. This is Kibana instance, and it is exposed on port 5601. You can reach via your browser http://localhost:5601.
Now in Kibana, go to Dev Tools under Management section.
Dev Tools is an easy-to-use playground for Elasticsearch and indices. Here, https://github.com/horasan/3-product-menu-app/blob/main/index_menu-tree-finder-v3.txt, copy-paste the content of the index_menu-tree-finder-v3.txt file and run the script. You will get “acknowledged” : true response. Now an index (named menu-tree-finder-v3) is created.
Let us post some documents to index. Copy-paste the contents of sample_documents.txt and run the scripts (https://github.com/horasan/3-product-menu-app/blob/main/sample_documents.txt). You can use the first query (in sample_query.txt file) to get all the indexed documents. Now, we have created the index and added some documents to this index.
Step 3: Create a Spring Boot application to query Elasticsearch
Now, we will create a Spring Boot application to query Elasticsearch. You can download the source code from https://github.com/horasan/3-product-menu-app repository. This application exposes 2 APIs, namely http://localhost:3001/menuapi/, http://localhost:3001/menuapi/description/queryKey. The first one returns all the documents, other returns the documents which are hit against description field.
I will not go into details of the search queries. I used WrapperQueryBuilder instances to create the query objects. Because it is easy to re-use the queries which I used in Kibana interface.
To run the application, import the project to STS. Then run the application as Spring Boot. If all steps are running smoothly, you can call and get the results as follows (using Postman).
Step 4: Search as you type in action via Angular 6 application.
You can get the Angular 6 application from https://github.com/horasan/3-1-spa-product-menu-app.
When you run the application, you will see that it runs on port 4200. Just hit http://localhost:4200/ and you will land the following page.
Enter cust in the search textbox. You will get the following results.
Enter cust upda and you will get the same results in different order.
That is all. You have a running Elasticsearch cluster, an application that queries elasticsearch and a front-end. You can add new documents, see how the hitScore values change.
