An excerpt from http://www.sitepoint.com/javascript-autocomplete-widget-awesomplete/, by @narayanprusty
Autocomplete is a feature in web applications which predicts the rest of a word or sentence while the user is still typing. Users usually press the tab key to accept a suggestion, or the down arrow key to accept one of several.
In this tutorial we will look at how to use the Awesomplete JavaScript library to create an autocomplete widget in our websites. Awesomplete is created by Lea Verou, a well-known speaker, author and invited expert in the W3C CSS working group.
Why Not Use the HTML5 datalist Element?
The HTML5 datalist element is possibly the simplest way to implement an autocomplete feature in a website. Unfortunately, browser support for this element is limited and it’s implementation is inconsistent (e.g. Chrome matches only from the start, Firefox anywhere). It’s also not possible to style it according to your website’s design and, although promising, it’s probably not the right choice yet.
Awesomplete, on the other hand, is an ultra lightweight, customizable autocomplete widget, which you can drop into your pages. It has zero dependencies (no jQuery), works across all modern browsers and can be styled according to your website’s theme.
So what are we waiting for? Let’s dive in!
Continue reading this article on SitePoint