How to implement autocomplete, a user convenience feature
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.
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:
- 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
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:
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
with another jQuery UI theme name to change the appearance of the widget.
See Theming jQuery UI.
The following code sets up some values for later use.
Replace the values
yourIndexName with your own values
from your Dashboard.
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.
Finally, the following code shows the form with the search box, with id
This form is written using Ruby on Rails
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