Bootstrap 3 Typeahead

For simple autocomplete use cases there seems to be nothing wrong with the dropped typeahead plugin. Here you will find the typeahead autocomplete plugin for Twitter's Bootstrap 2 ready to use with Twitter's Bootstrap 3. The original code is written by@mdoand@fat.

Users who migrate their website or app from Twitter's Bootstrap 2 to Bootstrap 3 can also use this plugin to keep their current autocomplete functions. See for a complete list of migrations steps:Migrate your templates from Twitter Bootstrap 2.x to Twitter Bootstrap 3

With Twitter Bootstrap 3 the typeahead plugin had been dropped.@mdosays: "in favor of folks usingTwitter's typeahead.Twitter's typeahead has more features than the old bootstrap-typeahead.js and less bugs. "Twitter's typeahead don't work direct with Bootstrap 3. The DOM structure of the dropdown menu used bytypeahead.jsdiffers from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get thetypeahead.jsdropdown menu to fit the default Bootstrap's theme. Tryextended Bootstrap's LESSor if your are looking for a more a more extended version try:typeahead.js-bootstrap3.less.

Typeahead.jsdoesn't seem ready for the new Twitter Bootstrap 3 at the moment. Code is not up to date and fixes are need. See also: Typeahead problems with Bootstrap 3.0 RC1.

Download

• Download the latestbootstrap3-typeahead.jsorbootstrap3-typeahead-min.js.

• Include it in your source after jQuery and Bootstrap Javascript.

Full integration with Bootstrap 3 Typeahead

Download the latest version of Boostrap fromBootstrap.Copybootstrap3-typeahead.jsto the js/ folder. Editgruntfile.jsand addbootstrap3-typeahead.jsto the plugins' list. Build your own version with typeahead withgrunt dist.

CSS

There is no additional css required to use the plugin. Bootstrap's css contains all required styles in the.dropdown-menuclass. The original CSS add az-indexof 1051 to the dropdownmenu via the typeahead class. You could add this if you need it. .typeahead { z-index: 1051;}(less or css).

Usage

<input type= "text" data-provide= "typeahead" >

You'll want to setautocomplete= "off"to prevent default browser menus from appearing over the Bootstrap typeahead dropdown.

Via data attributes

Add data attributes to register an element with typeahead functionality as shown in the example above.

Via JavaScript

Call the typeahead manually with:

$('.typeahead').typeahead()

Destroys previously initialized typeaheads. This entails reverting DOM modifications and removing event handlers:

$('.typeahead').typeahead('destroy')

Also read:How to Use JSON Objects With Twitter Bootstrap Typeahead

Javascript Example

Loading a collection

$.get('example_collection.json', function(data){
$( "#name" ).typeahead({ source:data });
},'json');
//example_collection.json
// [ "item1", "item2", "item3" ]

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name todata-,as indata-source= "".

Name	type	default	description
source	array, function	[ ]	The data source to query against. May be an array of strings or a function. The function accepts two arguments, thequeryvalue in the input field and theprocesscallback. The function may be used synchronously by returning the data source directly or asynchronously via theprocesscallback's single argument.
items	number	8	The max number of items to display in the dropdown. Can also be set to 'all'
minLength	number	1	The minimum character length needed before triggering autocomplete suggestions. You can set it to 0 so suggestion are shown even when there is no text when lookup function is called.
showHintOnFocus	boolean	false	If hints should be shown when applicable as soon as the input gets focus.
scrollHeight	number, function	0	Number of pixels the scrollable parent container scrolled down (scrolled out the viewport).
matcher	function	case insensitive	The method used to determine if a query matches an item. Accepts a single argument, theitemagainst which to test the query. Access the current query withthis.query.Return a booleantrueif query is a match.
sorter	function	exact match, case sensitive, case insensitive	Method used to sort autocomplete results. Accepts a single argumentitemsand has the scope of the typeahead instance. Reference the current query withthis.query.
updater	function	returns selected item	The method used to return selected item. Accepts a single argument, theitemand has the scope of the typeahead instance.
highlighter	function	highlights all default matches	Method used to highlight autocomplete results. Accepts a single argumentitemand has the scope of the typeahead instance. Should return html.
autoSelect	boolean	true	Allows you to dictate whether or not the first suggestion is selected automatically. Turning autoselect off also means that the input won't clear if nothing is selected andenterortabis hit.

Methods

.typeahead(options)
.lookup: To trigger the lookup function externally

Initializes an input with a typeahead.

Bower

To use withBower.Add to your bower.json file:

{
"name": "MyProject",
"dependencies": {
"bootstrap3-typeahead": "git@github:bassjobsen/Bootstrap-3-Typeahead.git#master"
}
}

Bloodhound

Bloodhoundis thetypeahead.jssuggestion engine, since version 0.10.0. Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data. To use Bloodhound with Bootstrap-3-Typeahead:

// instantiate the bloodhound suggestion engine
var numbers = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [ "(A)labama", "Alaska", "Arizona", "Arkansas", "Arkansas2", "Barkansas" ]
});

// initialize the bloodhound suggestion engine
numbers.initialize();

$('.typeahead').typeahead(
{
items: 4,
source:numbers.ttAdapter()
});

Bootstrap Tags Input

Bootstrap Tags Inputis a jQuery plugin providing a Twitter Bootstrap user interface for managing tags. Bootstrap Tags Input has a typeahead option which allows you to set the source:

$('input').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
}
});

or

$('input').tagsinput({
typeahead: {
source: function(query) {
return $.get('http://someservice ');
}
}
});

See also:bassjobsen#40