Skip to content

The Typeahead plugin from Twitter's Bootstrap 2 to use with Bootstrap 3

Notifications You must be signed in to change notification settings

nmeirik/Bootstrap-3-Typeahead

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

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 @mdo and @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. @mdo says: "in favor of folks using Twitter'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 by typeahead.js differs from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap theme.

Typeahead.js doesn'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

Full integration with Bootstrap 3 Typeahead

Download the latest version of Boostrap from Bootstrap. Copy bootstrap3-typeahead.js to the js/ folder. Edit gruntfile.js and add bootstrap3-typeahead.js to the plugins' list. Build your own version with typeahead with grunt dist.

CSS

There is no additional css required to use the plugin. Bootstrap's css contains all required styles in the .dropdownmenu class. The original CSS add a z-index of 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 set autocomplete="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()

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-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, 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.
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, 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.
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 and enter or tab is hit.

Methods

.typeahead(options)

Initializes an input with a typeahead.

About

The Typeahead plugin from Twitter's Bootstrap 2 to use with Bootstrap 3

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published