How to add autocompletion to forms with typeahead.js

We all know what auto complete looks like in input fields, and when we’re asking a user to enter dozens of answers, autocompleting is always a good idea.

Even better than creating an autocomplete system is creating an auto-complete system that’s compatible everywhere, and that’s what lead me to stumble upon typeahead.js by Twitter.

This is a fast and fully featured autocomplete library. It allows you to prefetch json files from your server, it then saves them in localStorage and when necessary shows it to the user.

Creating a simple autocomplete input

We will start by creating a simple autcomplete input where we will fetch a json file that contains all the states in the US and show it when the user starts typing.

The first thing we need to do is create our input:

<input class="states" dir=""auto”" spellcheck="false" type="text" placeholder="States" />

Now that we have created our text input let’s now start our typeahead function referencing that input:

$('.states').typeahead({
 // Code here
 });

We have created the basis of our function now and in order to create a simple autocomplete we need to give our autocomplete a name, in this case I will call it states, then we need to prefetch our json values and finally I will limit the number of tips that appear at a time to 5:

$('.states').typeahead({
 name: 'states',
 prefetch: 'states.json',
 limit: 5
 }); 

If you check it out in a browser you can see that we now have a simple autocomplete input field that gets the values we store in the json file and outputs them as you write.

Of course we don’t have to get a json file, if you have few values you can just type them on your function like so:

 $('.states').typeahead({
 name: 'states',
 local: ['alambama', 'alaska', 'washington']
 });

This depends on what system you want to implement and how complicated it will be.

With typeahead you can have multiple data sets in the same input. If for example I want to search in the states.json and in countries.json I can use:

$('.both').typeahead([
 {
 name: 'states',
 prefetch: 'states.json'
 },
 {
 name: 'countries',
 prefetch: 'countries.json'
 }
 ]);

If you check this out in a browser you can see that it does indeed search through both the json files but it gets complicated to see which is which because we don’t have a divider or a title. To add a header that separates each data set, just add this line after you’ve prefetched the file:

header: '<span class="header">Countries</span>’

Add this in for the countries json file and another one that says states to the states json file. Now it’s all a matter of styling to make it stand out on the page.

Using a template

The last example was a very simple one where we only had one key in our json file but we can also have more than one key and then use a template engine to show our values as we please.

In this example I will use the one that typeahead uses, a json file that contains all the open source repos that twitter has.

The first thing we need to do is create the typeahead function as we would normally do:

$('.repos').typeahead({
 name: 'repos',
 prefetch: 'repos.json',
 });

After we have given it a name and fetched the file, we now need to configure the template, I will show the name, language and description of each repository and have each one of these inside a paragraph tag:

$('.repos').typeahead({ name: 'repos', prefetch: 'repos.json', template: [ '<p class="name">{{name}}</p>', '<p class="lang">{{language}}</p>', '<p class="desc">{{description}}</p>' ].join(‘’), engine: Hogan });

All we did in the template part of our code was surround each part with a paragraph tag, each with a different class so that we can style this later. In the last line I specified what templating engine I used and set the value to Hogan. You can see a demo of this here.

Typeahead makes it easy to add complex, autocompletion to our sites, with minimal coding.