Using Swiftype with Typeahead.js (Part 2: Customization)

Typeahead.js is a popular autocomplete library and you can configure typeahead.js to be used with your Swiftype engine. This is the second part of a three part tutorial to configure Swiftype with typeahead.js. The first section taught you how to configure your engine with typeahead.js and the third section three lets you connect typeahead.js with our JavaScript embed.

In order to complete this tutorial you should have:

• Completed Tutorial 1: Configuration
• OR already have typeahead.js configured to work with your indexed Swiftype engine

This tutorial will teach you how to:

• Show highlighting in the suggestion menu
• Create custom templates to add images and additional information to the suggestion menu

Results

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

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

Enable highlighting

To enable highlighting you will add a field in your configuration. The highlighting will show up as bolded text on the title of the product if it matches the user's input.

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

Create custom templates for your suggestion menu

You can create a more robust suggestion menu by utilizing templates. You can use the data attributes directly, or use a popular template framework (for example, Handlebars). Templates is a field added to the configuration that has several additional options. All options need to return an HTML string or precompiled template. We will use custom HTML strings for the notFound and suggestion settings.

<script>
  var suggestionTemplate = function (data) {
    return '<div><img class="image" src="' + data.image + '"/> <p class="menu-text">' + data.title + '</p>' + '<p class="price menu-text"> $' + data.price + '</p></div>'
  }

  $('#remote .typeahead').typeahead(
  {
    highlight: true,
  },
  {
    name: 'page',
    display: 'title',
    source: suggestionEngine,
    templates: {
      notFound: '<p> not found </p>',
      suggestion: suggestionTemplate
    }
  });
</script>

Add "show all results" to the bottom of your suggestion menu

Adding a "show all results" link in the bottom of your suggestion menu is also handled in the templates parameter. The templates parameter has an optional value, footer. Similar to the above template options, footer also requires an HTML string or a precompiled template.

<script>
  var suggestionTemplate = function (data) {
    return '<div><img class="image" src="' + data.image + '"/> <p class="menu-text">' + data.title + '</p>' + '<p class="price menu-text"> $' + data.price + '</p></div>'
  }

  var footerTemplate = function (data) {
    return '<div class="show-all"><a href="#">see all results for "' + data.query + '"</p></div>'
  }

  $('#remote .typeahead').typeahead(
  {
    highlight: true,
  },
  {
    name: 'page',
    display: 'title',
    source: suggestionEngine,
    templates: {
      notFound: '<p> not found </p>',
      suggestion: suggestionTemplate,
      footer: footerTemplate
    }
  });
</script>

The footer will be on the bottom of the suggestions menu at all times. This current version does not have the link directing to any page. You can link it to any page that contains your search results or you can follow the next tutorial. The next tutorial will go over how to use the JavaScript embed with your search bar.