Autocomplete

Introduction

This section describes how to build autocomplete functionality, which can be built in a number of ways using EPiServer Find. The simplest way is to utilize the fact that the REST API supports JSONP and very quickly build autocomplete using the jQuery UI jQuery UI) in our 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 we add a search box:

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

Finally, we 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>

Of course, <index_url> in the code above should be replaced with a real index URL on a format such as http://es-api01.episerver.com/HrkbWMOkwslDEZ8Mhhunk9FX10s0fAx1/myindex. Also, note that if the documents have been indexed using the .NET client API, the "Title" field would actually be named Title$$string.

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

To post queries, the only change that needs to be done is simply to create the query object and POST it to EPiServer Find. EPiServer Find supports most native ElasticSearch queries, and a simple prefix autocomplete on the "Title" field would look 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