search mobile facets autocomplete spellcheck crawler rankings weights synonyms analytics engage api customize documentation install setup technology content domains user history info home business cart chart contact email activate analyticsalt analytics autocomplete cart contact content crawling custom documentation domains email engage faceted history info install mobile person querybuilder search setup spellcheck synonyms weights engage_search_term engage_related_content engage_next_results engage_personalized_results engage_recent_results success add arrow-down arrow-left arrow-right arrow-up caret-down caret-left caret-right caret-up check close content conversions-small conversions details edit grid help small-info error live magento minus move photo pin plus preview refresh search settings small-home stat subtract text trash unpin wordpress x alert case_deflection advanced-permissions keyword-detection predictive-ai sso

Using Swiftype with Typeahead.js (Part 3: Connection)

Typeahead.js is a popular autocomplete library and you can configure typeahead.js to be used with your Swiftype engine. This is the third 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 second section taught you how to customize the dropdown suggestion menu.

In order to complete this tutorial you should have:

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

This tutorial will teach you how to:

  • Connect your search bar with Swiftype search using the JavaScript embed found on the installation tab

Results

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

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

Add the JavaScript embed code

The JavaScript embed code is found on the installation tab in your Swiftype dashboard. This code allows you to have customize your search bar and still use the dashboard for all other features. Go into your dashboard and copy and paste the code directly into your file where your search bar is located.

<script type="text/javascript">
  (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');

  _st('install','YOUR-INSTALL-KEY','2.0.0');
</script>

Add a keydown event handler

The current embed looks for your search bar to be an input field with a specific class (st-input), and it applies our built-in autocomplete and search to this input. We are not going to apply the st-input class name to our input because we already have typeahead.js working and do not need to utilize Swiftype's default autocomplete. We do need to add an keydown event handler to see when the user presses the "Enter" key for Swiftype's overlay to appear.

<script>
  $('.typeahead').keydown(function(key) {
    if (key.keyCode == 13) {
      window.location.hash = '#stq=' + $(this).val();
    }
  });
</script>

Your search bar is now configured to use Swiftype's JavaScript embed and display search results with Swiftype's overlay.