Using Swiftype with Typeahead.js (Part 1: Configuration)

Typeahead.js is a popular autocomplete library and you can configure typeahead.js to be used with your Swiftype engine. This is the first part of a three part tutorial to configure Swiftype with typeahead.js. Section two teaches you how to customize the dropdown suggestion menu and section three lets you connect typeahead.js with our JavaScript embed.

In order to complete this tutorial you should have:

An indexed engine (need help setting up your engine?)

This tutorial will teach you how to:

Connect your engine with typeahead.js
Show one field per result in the suggestion menu

Result

Below is the finished result. Follow the tutorial for step-by-step instructions.

See the Pen typeahead.js, part 1 by Swiftype (@swiftype) on CodePen.

Download typeahead.js and bloodhound

There are two components to typeahead.js: bloodhound, the suggestion engine and typeahead, the results users see. You can download the the two files on the Typeahead.js GitHub. Typeahead.js also relies on the use of jQuery.

Link typeahead.js, bloodhound and jQuery

Create a file, index.html, and link to the previously downloaded files.

<head>
  <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
  <script src="bloodhound.js"></script>
  <script src="typeahead.jquery.js"></script>
</head>

Create a search field

Inside the body tag of index.html create an input field that will be the search bar for your site.

<div id="remote">
  <input class="typeahead" type="text" placeholder="search">
</div>

Connect your input field to typeahead

Place the following code inside a script tag in the body of index.html. The configuration fields are name, display and source. Name indicates the name of your JSON object that you are returning in your results. In our Swiftype demo engine, it is setup to be 'page'. Display selects what is shown to the users in the typeahead menu, 'title' is an attribute we have indexed for all products in our engine.

Source is the suggestion engine, this is where typeahead will look for documents. We have to make a custom function to access the public API endpoint for Swiftype.

<script>
  $('#remote .typeahead').typeahead(null,
    {
      name: 'page',
      display: 'title',
      source: suggestionEngine,
    }
  );
</script>

Generate results, create a bloodhound suggestion engine

As mentioned above, to generate results we need to create a suggestion engine to use. We will create a Bloodhound engine with the variable name suggestionEngine.

<script>
  var suggestionEngine = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      remote: {
        url: 'http://api.swiftype.com/api/v1/public/engines/search?q=',
        replace: function(url, query) {
          return url + query + "&engine_key=YOUR_ENGINE_KEY";
      },
      transform: function(response) {
        return response.records.page;
      },
      ajax: {
        type: "POST",
        data: {
          q: function() {
            return $('.typeahead').val()
          }
        }
      }
    }
  });
</script>

The Bloodhound engine executes a POST request that captures the value of the user's input and requests results from the search endpoint of the public API. Replace YOUR_ENGINE_KEY with your Swiftype engine key.

Style your results

You can create a custom look with CSS. The interactive box at the beginning of the tutorial shows some examples of some custom styles you can add.

Custom templates and advanced styles

Currently, the results only show one field. There are many options to customize your results and enhance your users experience. Follow our next tutorial to learn how to enable highlighting, show images, and add a show all results link to the bottom of your typeahead.js suggestion menu.

tutorials