Responsive Web, Bootstrap and love!

Everyone is endorsing responsive web design these days. Everyone should do. It is always good to adopt things that benefits you. The next immediate thing that comes in mind after the responsive web design is Twitter bootstrap.

Nothing can beat Bootstrap in terms of performance, responsiveness and features. That is the reason why people are choosing Bootstrap over every other framework out there.

Learn more about Twitter Bootstrap

Typeahead, has never been so easy before

Before Bootstrap Typeahead, every other developer was familiar with Ajax AutoComplete. Ajax AutoComplete used to be complex as hell and used to waste hours and hours in order to implement it. Thanks to Twitter Bootstrap, because of which we found a way to implement the same feature in couple of lines of code. All we need to provide is source of data.

Quick overview of Bootstrap Typeahead

Works with anything

Typeahead works with arrays of strings, JSON objects. Examples are given below :

Array String

HTML :

<input id="typeahead"> type="text" data-provide="typeahead">

Javascript :

var countries = ["India", "United States", "Canada"];

$('#typeahead').typeahead(
     source: countries
)

Output :

Bootstrap Typeahead

JSON Object

HTML :

<input id="typeahead"> type="text" data-provide="typeahead">

Javascript :

var jsonString = '[{"label":"System Administrator","value":"1"},{"label":"Software Tester","value":"3"},{"label":" Software Developer","value":"4"},{"label":"Senior Developer","value":"5"},{"label":"Cloud Developer","value":"6"},{"label":"Wordpress Designer","value":"7"}]';

var jsonObj = $.parseJSON(jsonString);
var sourceArr = [];

for (var i = 0; i < jsonObj.length; i++) {
   sourceArr.push(jsonObj[i].label);
}

$("#typeahead").typeahead({
   source: sourceArr
});

Output :

Bootstrap Typeahead

Things to remember : Do not forget to parse JSON data before pushing it in to array.

Extending Typeahead

Typeahead functionality can be extended by using Options provided by bootstrap

Typeahead Options

Source

This function takes two arguments. function can be implemented as shown in code below

Javascript :

$("#typeahead").typeahead({
   source: function (query, process){
    //implementation logic.
}
});

Items and minLength

items define maximum numbers of items to be shown in result dropdown. minLegth decides minimum character length required before triggering the typeahead.

$("#typeahead").typeahead({
   items : 4,
   minLength : 5
});

Matcher

Accepts single argument item. Matcher compares the query with an item. Matcher is helpful in comparison cases.

$("#typeahead").typeahead({
   matcher: function(item){
    //your comparison logic returns true / false
   }
});
Sorter

Used for sorting the suggestions / results. Accepts single argument items. You can refer the current query with this.query.

$("#typeahead").typeahead({
   sorter: function(items){
    items.sort(); //or logic on many items
   }
});
Updater

Returns selected item. Accepts single argument, item.

$("#typeahead").typeahead({
   updater: function(item){
       //logic on selected item here.. e.g. append it to div in html
       return item;
   }
});
Highlighter

Accepts single argument, item. It must return html. It highlights user’s input in suggestions.

$("#typeahead").typeahead({
   highlighter: function(item){
       //highlight using css, html skills
   }
});

Less is more. With only few options we can customize and extend typeahead beyond imaginations.

Share your thoughts and implementation ideas.

Referances :

1. http://twitter.github.com/bootstrap/javascript.html#typeahead
2. http://tatiyants.com/how-to-use-json-objects-with-twitter-bootstrap-typeahead/

  • Laercio

    Thanks this post helped me a lot

    • Glad it helped! I will try to write such more helpful posts 🙂

      Regards,
      Rahul Patil

  • Marcel

    Two years later, I say a huge thank you for this post here!! You helped me out of a beginning crisis… and presented me the perfect solution. Thanks alot!! 🙂

  • Cristian

    Hi

    i can’t see where is the file *.json … i need to do this with a json file, please helpe me!!!!!!!!!

  • 黄玲

    很好的插件!感谢互联网上的大神!!!!!!

  • Mir Al Monsor

    this is abjectly I want.