The typeahead are very important input fields in web forms. The fundamental utilization of  typeahead is to enhance  the user experience by giving clues or a list of possible choices based in view of the text  entered while filling a form or looking something as in the Google search. Its primary reason is to save time and reduces the number of potential errors.

To use typeahead.js in your project, download it from http://twitter.github.io/typeahead.js/  and also you can change any text-based <inputs> element into a typeahead.

Here is the HTML code :- 

<form id="my-form">
    <input class="form-control" name="search" type="text" placeholder="Type Here..." id="my-autoc">
        <br>
</form>

You need to add following Script :- 

$('#my-autoc').typeahead({
    name: 'search',
    remote: {
      url: 'http://suggestqueries.google.com/complete/search?client=chrome&q=%QUERY',
      dataType: 'jsonp',
      cache: false,
      filter: function(parsedResponse){
          return (parsedResponse.length > 1) ? parsedResponse[1] : [] ;
      }
    }
  }).on('typeahead:selected', function(e){
    e.target.form.submit();
  });

Bloodhound is the typeahead.js recommendation engine. It is exceptionally adaptable and offers advanced functionalities for example prefetching remote data, fast lookups through intelligent caching using the browser local storage etc.

http://jsfiddle.net/CNMfL/295/