Twitter Bootstrap Typeahead Plugin Extension

UPDATE (Feb 21, 2013)

I no longer have the time to maintain this plugin. If you are looking for updated code, please take a look at the following to help you:

• Groups Branch

• 2.0 Branch

• Twitter's new advanced Typeahead - Not associated with Bootstrap

v1.2.2
Terry Rosen @rerrify

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

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 extension with some additional features:

• A callback function is available for when an item is selected
• Ability to specify data source properties
• Ability to use a local or remote (AJAX) data source
• Most original methods are overridable so you can customize without changing the source code

Required

• Twitter Bootstrap 2.0+
• jQuery 1.7+

Installation

1. Download Bootstrap & jQuery

2. Download this plugin.

• ZIP
• Clone in Windows
• git clone git://github.com/tcrosen/twitter-bootstrap-typeahead.git

3. Include files in your HTML. The minimum required for this plugin are:

4. Execute the plugin:

   $(myElement).typeahead(options);

Events

Options

{
    url: null,
    timeout: 300,
    method: 'post',
    triggerLength: 3,
    loadingClass: null,
    displayField: null,
    preDispatch: null,
    preProcess: null
}

Basic Usage

The plugin in its simplest (realistic) form.

var mySource = [{ id: 1, name: 'Terry'}, { id: 2, name: 'Mark'}, { id: 3, name: 'Jacob'}];

$('#myElement').typeahead({
	source: mySource
});

Or using a remote data source:

$('#myElement').typeahead({
    ajax: '/path/to/mySource'
});

Examples demonstrating various options are included in this project under the /demo folder

Why did you change so much from v1.0 to v1.1?

I found certain things to be redundant, like having separate sort and display properties. I can't think of a reasonable scenerio where you would be sorting based on something different than what you are displaying.

What the $#&* did you do to the source code?

I added comments, semi-colons and other formatting that I like to use based on idiomatic JS guidelines.

If you are concerned with the bigger file size, you should always be minifying your JS before production use.

Change Log

1.2.2

• Added support for jQuery 1.8 & Bootstrap 2.1
• Removed usage of jQuery.browser #9385
• Changed jQuery.data() to jQuery._data() in order to make test suite operational #11718
• Added an undocumented function eventSupported(eventName) to verify browser support for keydown event. You may override this function if you prefer to do this check another way.

1.2.1

• Some AJAX tests added
• Added fix for spontaneous AJAX bug reported by users
• grepper and lookup methods are now overridable

1.2

• Added AJAX support

1.1

• Major code cleanup
• Test cases added
• Documentation improvements

Road Map

1.3

• Add template support