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.

By Sara Vieira
Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/CSS3 and jQuery. You can follow her on twitter or check out her website.
  • Great article!

    One thing about Typeahead that makes it pretty awesome is that you can send searches off to the server and dynamically load in results.

    I also love that you can have multiple tokens that point to the same value, I actually wrote a blog post on this feature of Typeahead (I hope you don’t mind me sharing!): http://tosbourn.com/2013/08/javascript/transliteration-with-typeahead-js/

  • Bob

    Hello, this article looks nice but I’m not really sure how to get started with it because it doesn’t tell me what files I need to include on my page to make all of this work. I know there are some CSS and JS files required, but even after including typeahead.bundle.js and some of the other files on their site, I can’t actually get it to work. Would you mind updating the post with the rest of this information? Thanks!

  • Chandler Moisen

    Thanks for this – definitely helped me out.

    OP, you may want to note that you are using an older version of typeahead.js – 0.9.3 – as the current version (as of May 2nd) is 0.10.2. This caused some problems for me, initially.

    @Bob, you should visit OP’s demo page and save the the typeahead.js script. Doing this worked for me.

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns