Twitter Bootstrap Typeahead

In this tutorial you will learn how to create typeaheads with Twitter Bootstrap.

Creating Typeaheads with Twitter Bootstrap

The typeahead input fields are very popular in modern web forms. The main purpose of using typeahead is to improve the user experience by supplying hints or a list of possible choices based on the text they've entered while filling a from or searching something — like the Google instant search. It also saves time and reduces the number of potential errors, because the user has less likelihood of making a spelling mistake.

 

Note:Typeahead plugin has been dropped from the latest version of Bootstrap (v3.0), in favor of using Twitter typeahead.

Twitter typeaheads is a fast and fully-featured autocomplete library inspired by twitter.com's autocomplete search functionality. To create Twitter typeaheads first download typeahead.js from GitHub and include in your project after that you can turns any text-based <input> element (i.e. input[type="text"]) into a typeahead.

Creating Twitter Typeahead with Local Dataset

The following example will show you how to create Twitter typeahead with local dataset.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('input.typeahead').typeahead({
  •       name: 'accounts',
  •       local: ['Audi', 'BMW', 'Bugatti', 'Ferrari', 'Ford', 'Lamborghini', 'Mercedes Benz', 'Porsche', 'Rolls-Royce', 'Volkswagen']
  •     });
  • });  
  • </script>

— The output of the above example will look something like this:

 

Tip:Set autocomplete="off" for the input box if you want to prevent default browser menus from appearing over the Bootstrap type-ahead dropdown.


Creating Twitter Typeahead External Dataset

You can also specify external dataset through a URL pointing to a JSON file containing an array of datums. The individual units that compose datasets are called datums.

  • <script type="text/javascript">
  • $(document).ready(function(){
  •     $('input.typeahead').typeahead({
  •         name: 'countries',
  •         prefetch: 'data/countries.json',
  •         limit: 10
  •     });
  • });  
  • </script>
 
Close

Your Feedback:

 

We will be happy if you say something.