Build a search experience with the Search Application client
editBuild a search experience with the Search Application client
editThis document is a how-to guide to building a search experience with a search application, using the Search Application client. The client is a JavaScript library designed to be used in the browser. You’ll integrate this library into your web app to simplify querying your search application.
A sandbox environment is available for testing and experimenting with the search-application-client
library.
Jump there if you’d like to try out the client without setting up your own web app.
Clone the repository and follow the instructions in the README to get started.
Goal
editThis guide assumes you want to build a web app with the following search features:
- Search bar and results with custom relevance
- Control over the presentation of results, such as inclusion/exclusion of fields and highlighting of matching terms
- UI controls such as facets, filters, sorts, pagination
You can think of the search application as the "server side" that persists changes to Elasticsearch. Your web app acts as the "client side" that queries the search application. You’ll be making edits to both your search application and your web app to complete the implementation.
Prerequisites
editTo follow this guide, you’ll need:
-
An Elastic deployment, that satisfies the prerequisites for running a search application.
- If you don’t have an Elastic deployment, start a free trial on Elastic Cloud.
-
A search application.
- A web app to query your search application, using Search Application client.
Install and configure the client
editInstall the client
editInstall the client using npm, yarn, or a CDN.
Option 1: Using package manager
To install the client using npm, run the following command:
npm install @elastic/search-application-client
To install the client using yarn, run the following command:
yarn add @elastic/search-application-client
Option 2: Using CDN with HTML <script>
tag
Alternatively, you can install the client using a CDN.
Add the following <script>
tag to your web app’s HTML:
<script src="https://cdn.jsdelivr.net/npm/@elastic/search-application-client@latest"></script>
Import and initialize the client
editOnce installed, you can import the client into your web app. You’ll need the following information to initialize the client:
- The name of your search application
- The URL endpoint for your search application
- The API key for your search application
Find this information on the Connect page in the Kibana UI.
Option 1: Using JavaScript modules
editUse the following import statement:
import SearchApplicationClient from '@elastic/search-application-client';
Configure the client with your deployment details to start making search requests. You can generate an API key on the Connect page in the Kibana UI. Go to Search > Search Applications > <MY_SEARCH_APPLICATION> > Connect. You’ll find the following information prepopulated to initialize the client:
import Client from '@elastic/search-application-client' const request = Client( 'my-search-application', // search application name 'url-from-connect-page', // url-host 'api-key-from-connect-page', // api-key { // optional configuration } )
Once configured you’ll be able to make search requests to your search application using the client API, like this:
const results = await request() .query('star wars') .search()
Option 2: Using CDN
editAlternatively, if you’re using a CDN, you can import the client using the following statement:
<script> const Client = window['SearchApplicationClient']; </script>
Configure the client with your deployment details to start making search requests. You can generate an API key on the Connect page in the Kibana UI. Go to Search > Search Applications > <MY_SEARCH_APPLICATION> > Connect. You’ll find the following information prepopulated to initialize the client:
<script> const request = Client( 'my-example-app', // search application name 'url-from-connect-page', // url-host 'api-key-from-connect-page', // api-key { // optional configuration } ) </script>
Once configured you’ll be able to make search requests to your search application using the client API, like this:
<script> const results = await request() .query('star wars') .search() </script>
Working with your search template
editThe Search Application client is designed to work with any search template you create. You’ll use the Search Application APIs to create and manage your search templates.
When working with the Search Application APIs to manage templates, we provide the API examples using Kibana Console syntax.
Here’s an example template:
resp = client.search_application.put( name="my-example-app", search_application={ "indices": [ "my-example-app" ], "template": { "script": { "lang": "mustache", "source": "\n {\n \"query\": {\n \"bool\": {\n \"must\": [\n {{#query}}\n {\n \"query_string\": {\n \"query\": \"{{query}}\",\n \"search_fields\": {{#toJson}}search_fields{{/toJson}}\n }\n }\n {{/query}}\n ]\n }\n }\n }\n ", "params": { "query": "", "search_fields": "" } } } }, ) print(resp)
const response = await client.searchApplication.put({ name: "my-example-app", search_application: { indices: ["my-example-app"], template: { script: { lang: "mustache", source: '\n {\n "query": {\n "bool": {\n "must": [\n {{#query}}\n {\n "query_string": {\n "query": "{{query}}",\n "search_fields": {{#toJson}}search_fields{{/toJson}}\n }\n }\n {{/query}}\n ]\n }\n }\n }\n ', params: { query: "", search_fields: "", }, }, }, }, }); console.log(response);
PUT _application/search_application/my-example-app { "indices": ["my-example-app"], "template": { "script": { "lang": "mustache", "source": """ { "query": { "bool": { "must": [ {{#query}} { "query_string": { "query": "{{query}}", "search_fields": {{#toJson}}search_fields{{/toJson}} } } {{/query}} ] } } } """, "params": { "query": "", "search_fields": "" } } } }
This will allow you to add any template parameters you need to your template and then provide the values in your client request.
Use addParameter
to inject actual values into your template parameters.
For example, pass in values for search_fields
like this:
const results = await request() .query('star wars') // requires the template to use query parameter .addParameter('search_fields', ['title', 'description']) .search()
Example template
editWe recommend getting started with the boilerplate template provided in the client repository.
View this script to see how this is used.
The dictionary
parameter is used to pass in a JSON schema definition that describes structure and validation rules for the request object.
This schema is important, because it restricts the use of certain features in the Elasticsearch query.
View the schema.
Each search functionality in this guide requires a feature included in this template. These features require specific parameters to be present in the template:
-
Query:
query
-
Filters:
_es_filters
-
Faceting:
_es_filters
and_es_aggs
-
Sorting:
_es_sort_fields
-
Pagination:
from
andsize
Search features
editWe will explore all the essential basics you’ll need for a search experience. You’ll learn how to implement them using your search application and query them using the client.
Refer to the client repo for information on the available methods and their parameters.
Customizing relevance
editOur simple template uses query_string
searching across all fields, but this may not suit your use case.
You can update the template to provide better relevance recall.
In the below example, we’re using a multi-match
query against our template, with best_fields
and phrase_prefix
queries targeting different search fields.
resp = client.search_application.put( name="my-example-app", search_application={ "indices": [ "example-index" ], "template": { "script": { "lang": "mustache", "source": "\n {\n \"query\": {\n \"bool\": {\n \"must\": [\n {{#query}}\n {\n \"multi_match\" : {\n \"query\": \"{{query}}\",\n \"fields\": [ \"title^4\", \"plot\", \"actors\", \"directors\" ]\n }\n },\n {\n \"multi_match\" : {\n \"query\": \"{{query}}\",\n \"type\": \"phrase_prefix\",\n \"fields\": [ \"title^4\", \"plot\"]\n }\n },\n {{/query}}\n ],\n \"filter\": {{#toJson}}_es_filters{{/toJson}}\n }\n },\n \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n \"from\": {{from}},\n \"size\": {{size}},\n \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n }\n ", "params": { "query": "", "_es_filters": {}, "_es_aggs": {}, "_es_sort_fields": {}, "size": 10, "from": 0 }, "dictionary": {} } } }, ) print(resp)
const response = await client.searchApplication.put({ name: "my-example-app", search_application: { indices: ["example-index"], template: { script: { lang: "mustache", source: '\n {\n "query": {\n "bool": {\n "must": [\n {{#query}}\n {\n "multi_match" : {\n "query": "{{query}}",\n "fields": [ "title^4", "plot", "actors", "directors" ]\n }\n },\n {\n "multi_match" : {\n "query": "{{query}}",\n "type": "phrase_prefix",\n "fields": [ "title^4", "plot"]\n }\n },\n {{/query}}\n ],\n "filter": {{#toJson}}_es_filters{{/toJson}}\n }\n },\n "aggs": {{#toJson}}_es_aggs{{/toJson}},\n "from": {{from}},\n "size": {{size}},\n "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n }\n ', params: { query: "", _es_filters: {}, _es_aggs: {}, _es_sort_fields: {}, size: 10, from: 0, }, dictionary: {}, }, }, }, }); console.log(response);
PUT _application/search_application/my-example-app { "indices": ["example-index"], "template": { "script": { "lang": "mustache", "source": """ { "query": { "bool": { "must": [ {{#query}} { "multi_match" : { "query": "{{query}}", "fields": [ "title^4", "plot", "actors", "directors" ] } }, { "multi_match" : { "query": "{{query}}", "type": "phrase_prefix", "fields": [ "title^4", "plot"] } }, {{/query}} ], "filter": {{#toJson}}_es_filters{{/toJson}} } }, "aggs": {{#toJson}}_es_aggs{{/toJson}}, "from": {{from}}, "size": {{size}}, "sort": {{#toJson}}_es_sort_fields{{/toJson}} } """, "params": { "query": "", "_es_filters": {}, "_es_aggs": {}, "_es_sort_fields": {}, "size": 10, "from": 0 }, "dictionary": { // add dictionary restricting // _es_filters, _es_sort_fields & _es_aggs params // Use example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json } } } }
Refer to for examples of different types of queries, including combinations of text search, kNN search, ELSER search, hybrid search with RRF, and more.
Use case: I want to dynamically adjust the search fields
If you need to adjust search_fields
at query request time, you can add a new parameter to the template (for example: search_fields
) and use the addParameter
method to provide the fields to the template.
Use case: I want to boost results given a certain proximity to the user
You can add additional template parameters to send the geo-coordinates of the user.
Then use function_score
to boost documents which match a certain geo_distance
from the user.
Result fields
editBy default, all fields are returned in the _source
field.
To restrict the fields returned, specify the fields in the template.
resp = client.search_application.put( name="my-example-app", search_application={ "indices": [ "example-index" ], "template": { "script": { "lang": "mustache", "source": "\n {\n \"query\": {\n \"bool\": {\n \"must\": [\n {{#query}}\n \n {{/query}}\n ],\n \"filter\": {{#toJson}}_es_filters{{/toJson}}\n }\n },\n \"_source\": {\n \"includes\": [\"title\", \"plot\"]\n },\n \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n \"from\": {{from}},\n \"size\": {{size}},\n \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n }\n ", "params": { "query": "", "_es_filters": {}, "_es_aggs": {}, "_es_sort_fields": {}, "size": 10, "from": 0 }, "dictionary": {} } } }, ) print(resp)
const response = await client.searchApplication.put({ name: "my-example-app", search_application: { indices: ["example-index"], template: { script: { lang: "mustache", source: '\n {\n "query": {\n "bool": {\n "must": [\n {{#query}}\n \n {{/query}}\n ],\n "filter": {{#toJson}}_es_filters{{/toJson}}\n }\n },\n "_source": {\n "includes": ["title", "plot"]\n },\n "aggs": {{#toJson}}_es_aggs{{/toJson}},\n "from": {{from}},\n "size": {{size}},\n "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n }\n ', params: { query: "", _es_filters: {}, _es_aggs: {}, _es_sort_fields: {}, size: 10, from: 0, }, dictionary: {}, }, }, }, }); console.log(response);
PUT _application/search_application/my-example-app { "indices": ["example-index"], "template": { "script": { "lang": "mustache", "source": """ { "query": { "bool": { "must": [ {{#query}} // ... {{/query}} ], "filter": {{#toJson}}_es_filters{{/toJson}} } }, "_source": { "includes": ["title", "plot"] }, "aggs": {{#toJson}}_es_aggs{{/toJson}}, "from": {{from}}, "size": {{size}}, "sort": {{#toJson}}_es_sort_fields{{/toJson}} } """, "params": { "query": "", "_es_filters": {}, "_es_aggs": {}, "_es_sort_fields": {}, "size": 10, "from": 0 }, "dictionary": { // add dictionary restricting _es_filters and _es_aggs params // Use the dictionary example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json } } } }
Use case: I want to dynamically adjust the result fields
If you need to adjust the fields returned at query request time, you can add a new parameter to the template (for example: result_fields
) and use the addParameter
method to provide the fields to the template.
Highlighting and snippets
editHighlighting support is straightforward to add to the template. With the highlighting API, you can specify which fields you want to highlight for matches.
In the following example, we specify title
and plot
as the highlighted fields.
title
typically has a short value length, compared to plot
which is variable and tends to be longer.
We specify the title to be fragment_size
of 0
to return all of the text when there is a highlight.
We specify the plot to be fragment_size
of 200
, where each highlighted fragment will be up to 200 characters long.
resp = client.search_application.put( name="my-example-app", search_application={ "indices": [ "example-index" ], "template": { "script": { "lang": "mustache", "source": "\n {\n \"query\": {\n \"bool\": {\n \"must\": [\n {{#query}}\n \n {{/query}}\n ],\n \"filter\": {{#toJson}}_es_filters{{/toJson}}\n }\n },\n \"_source\": {\n \"includes\": [\"title\", \"plot\"]\n },\n \"highlight\": {\n \"fields\": {\n \"title\": { \"fragment_size\": 0 },\n \"plot\": { \"fragment_size\": 200 }\n }\n },\n \"aggs\": {{#toJson}}_es_aggs{{/toJson}},\n \"from\": {{from}},\n \"size\": {{size}},\n \"sort\": {{#toJson}}_es_sort_fields{{/toJson}}\n }\n ", "params": { "query": "", "_es_filters": {}, "_es_aggs": {}, "_es_sort_fields": {}, "size": 10, "from": 0 }, "dictionary": {} } } }, ) print(resp)
const response = await client.searchApplication.put({ name: "my-example-app", search_application: { indices: ["example-index"], template: { script: { lang: "mustache", source: '\n {\n "query": {\n "bool": {\n "must": [\n {{#query}}\n \n {{/query}}\n ],\n "filter": {{#toJson}}_es_filters{{/toJson}}\n }\n },\n "_source": {\n "includes": ["title", "plot"]\n },\n "highlight": {\n "fields": {\n "title": { "fragment_size": 0 },\n "plot": { "fragment_size": 200 }\n }\n },\n "aggs": {{#toJson}}_es_aggs{{/toJson}},\n "from": {{from}},\n "size": {{size}},\n "sort": {{#toJson}}_es_sort_fields{{/toJson}}\n }\n ', params: { query: "", _es_filters: {}, _es_aggs: {}, _es_sort_fields: {}, size: 10, from: 0, }, dictionary: {}, }, }, }, }); console.log(response);
PUT _application/search_application/my-example-app { "indices": ["example-index"], "template": { "script": { "lang": "mustache", "source": """ { "query": { "bool": { "must": [ {{#query}} // ... {{/query}} ], "filter": {{#toJson}}_es_filters{{/toJson}} } }, "_source": { "includes": ["title", "plot"] }, "highlight": { "fields": { "title": { "fragment_size": 0 }, "plot": { "fragment_size": 200 } } }, "aggs": {{#toJson}}_es_aggs{{/toJson}}, "from": {{from}}, "size": {{size}}, "sort": {{#toJson}}_es_sort_fields{{/toJson}} } """, "params": { "query": "", "_es_filters": {}, "_es_aggs": {}, "_es_sort_fields": {}, "size": 10, "from": 0 }, "dictionary": { // add dictionary restricting _es_filters and _es_aggs params // Use the dictionary example provided in repo: https://github.com/elastic/search-application-client/blob/main/bin/request_schema.json } } } }
If a match was found, this will return the results with a highlight field. For example:
{ "hits": [ { "_index": "movies", "_type": "_doc", "_id": "1", "_score": 0.2876821, "_source": { "title": "The Great Gatsby", "plot": "The Great Gatsby is a novel by F. Scott Fitzgerald that follows the story of Jay Gatsby, a wealthy and mysterious man, as he tries to win back the love of his life, Daisy Buchanan." }, "highlight": { "title": ["The Great <em>Gatsby</em>"], "plot": [ "The Great <em>Gatsby</em> is a novel by F. Scott Fitzgerald that follows the story of <em>Jay</em> <em>Gatsby</em>, a wealthy and mysterious man, as he tries to win back the love of his life, Daisy Buchanan." ] } } ] }
Highlighting helper
editWhen displaying the fields in the frontend, you will need to first determine if the field has a highlight. To simplify this, we provide a helper.
import Client, { Highlight } from '@elastic/search-application-client' // example React component const ResultsList = ({ hits } ) => { return hits.map((hit) => ( <div className="result"> <div className="title">{Highlight(hit, "title")}</div> <div className="description">{Highlight(hit, "plot")}</div> </div> )) }
Pagination
editTo use pagination, set the page number and the page size.
By default, the page size is 10.
The size
and from
parameters allow you to control the page and number of hits returned in the response.
We can do this using the client with the setSize
and setFrom
methods.
// page 1 const results = await request() .setSize(20) .setFrom(0) .search() // page 2 const results = await request() .setSize(20) .setFrom(20) .search()
Sorting
editTo use sorting, specify the field name and the sort order or pass _score
to sort by relevance.
Requires the _es_sort_fields_fields
param in the search template.
Refer to our example template to see where this is used.
By default, the results will be sorted in order of score.
If you need to sort on a field other than the score, use the setSort
method with an array of objects.
const results = await request() .setSort([{ year: 'asc' }, '_score']) .search()
Filtering
editThe Search application client also supports filters and facets. To use these, you need to add two parameters:
-
_es_filters
-
_es_aggs
Refer to our example template to see where these are used.
Base Filtering
editWith a template that’s configured to use filters, use the setFilter
method to add filters to your query.
The boilerplate template schema only supports term, range, match, nested, geo_bounding_box and geo_distance filters. If you need to use a particular clause, you can update the template schema.
Below is an example of using setFilter
.
// return only "star wars" movies that are rated PG const results = await request() .query('star wars') .setFilter({ term: { 'rated.enum': 'PG', }, }) .search()
Facets
editThe client supports the ability to configure facets with your results. Specify facets in the client initialization call. For example, say we want to add facets for actors, directors and IMDB rating.
const request = Client( 'my-example-app', // search application name 'https://d1bd36862ce54c7b903e2aacd4cd7f0a.us-east4.gcp.elastic-cloud.com:443', // api-host 'api-key-from-connect-page', // api-key { facets: { actors: { type: 'terms', field: 'actors.keyword', disjunctive: true, }, directors: { type: 'terms', field: 'director.keyword', size: 20, disjunctive: true, }, imdbrating: { type: 'stats', field: 'imdbrating', }, }, } )
In Elasticsearch, the keyword
type is used for fields that need to be searchable in their exact, unmodified form.
This means these queries are case-sensitive.
We use this type for facets because facets require aggregating and filtering data based on exact values or terms.
Use the addFacetFilter
method to add facets to your query.
In the following example, we only want to return movies:
- Featuring Harrison Ford as actor
- Directed by George Lucas or Ridley Scott
- With an IMBD rating greater than 7.5
const results = await request() .addFacetFilter('actors', 'Harrison Ford') .addFacetFilter('directors', 'George Lucas') .addFacetFilter('directors', 'Ridley Scott') .addFacetFilter('imdbrating', { gte: 7.5, }) .search()
You can access the facets in the results:
{ "took": 1, "timed_out": false, "_shards": { "total": 1, "successful": 1, "skipped": 0, "failed": 0 }, "hits": { "total": { "value": 2, "relation": "eq" }, "max_score": 0, "hits": [ { "_index": "imdb_movies", "_id": "tt0076759", "_score": 0, "_source": { "title": "Star Wars: Episode IV - A New Hope", "actors": [ "Mark Hamill", "Harrison Ford", "Carrie Fisher", "Peter Cushing" ], "plot": "Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, a wookiee and two droids to save the universe from the Empire's world-destroying battle-station, while also attempting to rescue Princess Leia from the evil Darth Vader.", "poster": "https://s3-eu-west-1.amazonaws.com/imdbimages/images/MV5BMTU4NTczODkwM15BMl5BanBnXkFtZTcwMzEyMTIyMw@@._V1_SX300.jpg" } }, { "_index": "imdb_movies", "_id": "tt0083658", "_score": 0, "_source": { "title": "Blade Runner", "actors": [ "Harrison Ford", "Rutger Hauer", "Sean Young", "Edward James Olmos" ], "plot": "Deckard, a blade runner, has to track down and terminate 4 replicants who hijacked a ship in space and have returned to Earth seeking their maker.", "poster": "https://s3-eu-west-1.amazonaws.com/imdbimages/images/MV5BMTA4MDQxNTk2NDheQTJeQWpwZ15BbWU3MDE2NjIyODk@._V1_SX300.jpg" } } ] }, "aggregations": {}, "facets": [ { "name": "imdbrating_facet", "stats": { "min": 8.300000190734863, "max": 8.800000190734863, "avg": 8.550000190734863, "sum": 17.100000381469727, "count": 2 } }, { "name": "actors_facet", "entries": [ { "value": "Harrison Ford", "count": 2 }, { "value": "Carrie Fisher", "count": 1 }, { "value": "Edward James Olmos", "count": 1 }, { "value": "Mark Hamill", "count": 1 }, { "value": "Peter Cushing", "count": 1 }, { "value": "Rutger Hauer", "count": 1 }, { "value": "Sean Young", "count": 1 } ] }, { "name": "directors_facet", "entries": [ { "value": "Steven Spielberg", "count": 3 }, { "value": "Andrew Davis", "count": 1 }, { "value": "George Lucas", "count": 1 }, { "value": "Irvin Kershner", "count": 1 }, { "value": "Richard Marquand", "count": 1 }, { "value": "Ridley Scott", "count": 1 } ] } ] }