Update: also read this post
In twitter bootstrap there is a JQuery plugin for auto completion. It’s called bootstrap-typeahaed. Typeahead uses an array of strings as datasource and is easily activated with in it’s simplest form 1 line of code.
$("#inputboxselector").typeahead({ "source":arrayOfStrings}) |
$("#inputboxselector").typeahead({ "source":arrayOfStrings})
It’s very easy to use but somewhat limited. We needed a slightly different functionality.
Our use case:
- 2 inputboxes, one for postal code (the numeric form) and one inputbox for the community that has that postal code.
- In Belgium different communities can have the same postal code, and the right community should be selected on selecting a postal code. Or the right postal code should be selected on selecting a community.
- Show both the code an city in the autocomplete but only do autocomplete and highlighting on one of the fields depending on the inputbox.
The typeahead plugin is not suited for that. It only takes an array of strings and sets the selected value in the input box. We have an array of objects.
Objects like
{ "code":"9000", "city":"Gent"} |
{ "code":"9000", "city":"Gent"}
We wanted to use typeahead instead of any other existing JQuery plugin since we’re already using twitter bootstrap.
To achieve this I extended, (actually more copied and altered) typeahead. The result is here. I called it typeaheadmap. It works just like bootstrap typeahead except that you have to add 2 more parameters to typeahead options object. Include bootstrap-typeaheadmap.js (+ JQuery 1.7+) and typeaheadmap.css (+ bootstraps base css) to use it.
View a demo
Read on for a usage example Continue reading “Extending Twitter Bootstrap Typeahead Plugin”
Like this:
Like Loading...