AutoComplete Tutorial

How to implement autocomplete, a user convenience feature

About Autocomplete

To make life easier for users of your Searchify-powered search application, add autocomplete functionality. With autocomplete, your app predicts what search term the user is trying to enter while the user is still typing. A list of suggestions is displayed and constantly updated as the user types more characters, until the user is able to pick the correct term from the list.

Why Use Autocomplete?

Selecting a term rather than typing every character saves users unnecessary keystrokes, increases perceived ease-of-use, and makes users happy. It also reduces spelling errors that can adversely affect search result quality. Finally, autocomplete is now so common in search applications, its absence might be surprising to users. Luckily, it's not too difficult to set up.

How It Works

Autocomplete is performed by two components:

  • Client, which sends requests with a partial query term. This is the part you need to code, and this page shows you how.
  • Server, which responds with a list of matches for the partial query string. Searchify provides this part. If you're curious about how the server handles data, see API Specification.

The client and server exchange data in JSON/JSONP format. This is handled through jQuery's AJAX support.

Setup

Before you start, you'll need to get a few things ready

Tools for This How-To

In this page, we'll show how to implement autocomplete by using:

  • JavaScript

    You don't have to do anything to set up JavaScript, but users will need to have JavaScript enabled in their browsers for the autocomplete scripts to work.

  • jQuery, jQuery UI and Indextank-jQuery

    In Quick Start, we show how to get jQuery, jQuery UI and indextank-jQuery set up.

  • Ruby on Rails ERB templating (optional)

    Rails ERB is used to construct the form containing the search box where autocomplete will appear to the user, but you can build the form using your own favorite technique.

Know Your Public URL

Every index on Searchify has a unique public URL, provided for the purpose of interacting with clients. You'll need to use this URL in requests from your autocomplete client. Find the public URL on the Dashboard.

In general, a public URL has the form:

http://<public part>.api.searchify.com

Example:

http://123abc.api.searchify.com

Quick Start: Copy & Paste

Tweak the following code snippets for your needs, and you're ready to go

For the client side implementation it's recommended (but not required) that you use Indextank-jQuery

(Optional) Replace the value flick with another jQuery UI theme name to change the appearance of the widget. See Theming jQuery UI.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js' type='text/javascript'></script>
<script src='https://raw.github.com/flaptor/indextank-jquery/master/jquery.indextank.ize.js' type='text/javascript'></script>
<script src='https://raw.github.com/flaptor/indextank-jquery/master/jquery.indextank.autocomplete.js' type='text/javascript'></script> 
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/flick/jquery-ui.css' rel='stylesheet'>

The following code sets up some values for later use.

Replace the values yourPublicURL and yourIndexName with your own values from your Dashboard. 

<script type='text/javascript'> 
var publicApiUrl = "yourPublicURL";
var indexName = "yourIndexName";
</script>

The following code shows the "document ready" callback function, which enables autocomplete suggestions on the input box. You can change #myform and #query to match your templates structure.

<script type='text/javascript'>

$(document).ready(function(){
    // let the form be 'indextank-aware'
    $("#myform").indextank_Ize(publicApiUrl, indexName);
    // let the query box have autocomplete
    $("#query").indextank_Autocomplete();
});


</script>

Finally, the following code shows the form with the search box, with id query This form is written using Ruby on Rails ERB. If you already have a form set up, you can use it instead of this example, as long as the search box name in your form matches up with the rest of our sample code (change your search box's id to query, and your form's id to myform). 

<%= form_tag search_path, :method => :get do %>
  <%= text_field_tag :query %>
  <button type="submit">Search</button>
<% end %>

More Information