Bootstrap-ext

extensions to bootstrap

View the Project on GitHub redlab/bootstrap-ext

Typeaheadmap

View County/Capital Demo

A make over of bootstraps typeahead that supports an array of objects, a listener function hook to receive selected data, and a customizable displayer function. See an example at src/demo/typeaheadmap. The Javascript and CSS file are at src/js/typaheadmap

Consider an example of the cities where the arrayOfObjects is a an array containing objects with cities and postalcodes

{ "code":"9000", "city":"Gent"}
		

the javascript for the postalcode inputbox would be like

$("#postalcodes").typeaheadmap({ "source":arrayOfObjects, "key": "code", "value": "city"})
		

for the citynames inputbox.

$("#cities").typeaheadmap({ "source":arrayOfObjects, "key": "city", "value": "code"})
		

To allow either input to automagically show the correct code or city there is an option to add a listener function. The listener is called on change of the typeaheadmap. Then it becomes

 $("#cities").typeaheadmap({ "source":arrayOfObjects, 
		    "key": "city", 
		    "value": "code", 
		    "listener": function(k, v) {
		    $("#postalcodes").val(v)
		})
		

Optional:

shameless copy of typeaheads options table
Name type default description
source array, function [ ] The data source to query against. May be an array of strings or a function. The function is passed two arguments, the query value in the input field and the process callback. The function may be used synchronously by returning the data source directly or asynchronously via the process callback's single argument.
items number 8 The max number of items to display in the dropdown.
minLength number 1 The minimum character length needed before triggering autocomplete suggestions
matcher function case insensitive The method used to determine if a query matches an item. Accepts a single argument, the item against which to test the query. Access the current query with this.query. Return a boolean true if query is a match.
sorter function exact match,
case sensitive,
case insensitive
Method used to sort autocomplete results. Accepts a single argument items and has the scope of the typeahead instance. Reference the current query with this.query.
updater function returns selected item The method used to return selected item. Accepts a single argument, the item and has the scope of the typeahead instance.
highlighter function highlights all default matches Method used to highlight autocomplete results. Accepts a single argument item and has the scope of the typeahead instance. Should return html.

Creating a minified version

If you want you can create a minified version using the provided pom file. To use this you need to have Maven 3 installed.

In the folder where the pom file is, run

mvn compile
and in the folder release, you'll find the minified and normal versions of the css and js files. The compressing is done with yui compressor.