Autocomplete

Introduction

This topic describes how to build autocomplete functionality, which can be built in a number of ways. The simplest way is to utilize the REST API's support of JSONP and use the jQuery UI in the <head> tag.

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css">
</head>

Then, add a search box.

<div class="ui-widget">
  <input id="search" />
</div>

Finally, add a script to wire up the autocomplete functionality.

<script>
  $(function () {
    $("#search").autocomplete({
      source: function (request, response) {
        $.ajax({
          url: "<index_url>/_search",
          dataType: "jsonp",
            data: {
              q: request.term + "*",
              size: 5,
              df: "Title.lowercase",
              fields: "Title "
            },
            success: function (data) {
              response($.map(data.hits.hits, function (item) {
                return {
                  label: item.fields.Title,
                  value: item.fields.Title
                };
              }));
            }
          });
        },
        minLength: 2
    });
  });
</script>

In the above code, replace <index_url> with a real index URL in a format like http://es-api01.episerver.com/HrkbWMOkwslDEZ8Mhhunk9FX10s0fAx1/myindex. Also, if the documents have been indexed using the .NET client API, the "Title" field is named Title$$string.

This is a simple example of implementing autocomplete functionality. You can customize it in a few ways, such as limiting the returned documents to a certain type by adding a type name after the index URL.

Important! To generate the statistics on which automatically-generated suggestions are based, you must add .Track() to normal queries.

Posting Queries

To post queries, create the query object and POST it to EPiServer Find. EPiServer Find supports most native ElasticSearch queries. A simple prefix autocomplete on the "Title" field looks like this.

<script>
$(function () {
    $("#search").autocomplete({
      source: function (request, response) {
        var wildcard = { "Title.lowercase": request.term+"*" };
        var postData = {
           "query": { "wildcard": wildcard },
           "fields": ["Title"],
           "size": 5
        };
        $.ajax({
          url: "<index_url>/_search",
          type: "POST",
          dataType: "json",
          data: JSON.stringify(postData),
            success: function (data) {
              response($.map(data.hits.hits, function (item) {
                return {
                  label: item.fields.Title,
                  value: item.fields.Title
                };
              }));
            }
          });
        },
        minLength: 2
    });
  });
</script>

Try our conversational search powered by Generative AI!

Autocomplete

Introduction

Posting Queries