Typeahead

An extension of the Twitter Bootstrap Typeahead plugin (as of v2.0.2)
http://twitter.github.com/bootstrap/javascript.html#typeahead

Demo

http://tcrosen.github.com/twitter-bootstrap-typeahead/

Required

• Twitter Bootstrap 2.0.2+
• jQuery 1.7.1+

About

All the thanks in the world to @mdo and @fat of @twitter for the wonderful Bootstrap utility.
I required more functionality out of the typeahead plugin so I created this simple extension. I do plan to add more features in the future.

Changes from the Original

Methods:

All original methods are now overridable:

matcher
sorter
highlighter
select
render

New Options:

valueProp
Default: id
Description: The object value that is returned when an item is selected.

matchProp
Default: name
Description: The object property to match the query against.

sortProp
Default: name
Description: The object property to use when sorting the items.

template
Default: '<%= matchProp %>'
Description: An html string for the list item. Object properties can be supplied in ERB-style tags, and will be rendered from the source data passed in. matchProp is a magic property that converts to whatever the defined matchProp option is set to.

itemSelected
Default: function (element, val, text, item) {}
Description: The callback function that is invoked when an item is chosen.

• element: the HTML element that was selected

• val: value of the valueProp property

• text: value of the textProp property

• item: the source data object for the selected entry

Sample Usage

var cities = [
		{ID: 1, Name: 'Toronto', Country: 'Canada'},
		{ID: 2, Name: 'Montreal', Country: 'Canada'},
		{ID: 3, Name: 'New York', Country: 'USA'},
		{ID: 4, Name: 'Buffalo', Country: 'USA'},
		{ID: 5, Name: 'Boston', Country: 'USA'},
		{ID: 6, Name: 'Columbus', Country: 'USA'},
		{ID: 7, Name: 'Dallas', Country: 'USA'},
		{ID: 8, Name: 'Vancouver', Country: 'USA'},
		{ID: 9, Name: 'Seattle', Country: 'USA'},
		{ID: 10, Name: 'Los Angeles', Country: 'USA'}
    ]

$(function() {
	$('#myElement').typeahead({
		source: cities,
		matchProp: 'Name',
		sortProp: 'Name',
		valueProp: 'ID',
		itemSelected: function(element, val, text, item) {
			alert('You selected the city ' + text + '('+ item.Country +') with ID ' + val + '')
			console.log(item)
		}
	})
})

A full working example is included in this project and is now available at http://tcrosen.github.com/twitter-bootstrap-typeahead/