v1.2
Terry Rosen @rerrify
An extension of the Twitter Bootstrap Typeahead plugin
http://twitter.github.com/bootstrap/javascript.html#typeahead
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
- Twitter Bootstrap 2.0.x
- jQuery 1.7.x
- ZIP
- Clone in Windows
git clone git://github.com/tcrosen/twitter-bootstrap-typeahead.git
-
Include files in your HTML. The minimum required for this plugin are:
<script src="/path/to/jquery.js" type="text/javascript"></script> <script src="/path/to/bootstrap-typeahead.js" type="text/javascript"></script> -
Execute the plugin:
$(myElement).typeahead(options);
Event | Description |
---|---|
highlighter | Highlights any matching results in the list. |
itemSelected |
The callback function that is invoked when an item is chosen.
|
matcher | Looks for a match between the query and a source item. |
render | Renders the list of results. |
select | Selects an item from the results list. |
sorter | Sorts the results. |
Name | Type | Default | Description |
---|---|---|---|
ajax | object |
{ url: null, timeout: 300, method: 'post', triggerLength: 3, loadingClass: null, displayField: null, preDispatch: null, preProcess: null } |
The object required to use a remote datasource. See also: ajax as a string (below) |
ajax | string | null |
Optionally, a simple URL may be used instead of the AJAX object. See also: ajax as an object (above) |
display | string | 'name' | The object property to match the query against and highlight in the results. |
item | string | '<li><a href="#"></a></li>' | The HTML rendering for a result item. |
items | integer | 8 | The maximum number of items to show in the results. |
menu | string | '<ul class="typeahead dropdown-menu"></ul>' | The HTML rendering for the results list. |
source | object | [] | The source to search against. |
val | string | 'id' | The object property that is returned when an item is selected. |
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
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.
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.
1.2
- Added AJAX support
1.1
- Major code cleanup
- Test cases added
- Documentation improvements