• Stars
    star
    1,685
  • Rank 27,618 (Top 0.6 %)
  • Language
    JavaScript
  • Created about 11 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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. Try extended Bootstrap LESS or if your are looking for a more extended version try: typeahead.js-bootstrap3.less.

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

Bootstrap 4


Bootstrap 4 is coming soon. The Bootstrap 3 Typeahead will also work with Bootstrap 4. The look and feel of Bootstrap 4 will differ from Bootstrap 3 and so does the drop down menu. In Bootstrap 4 the typeahead dropdown menu will look like that shown in the figure below: Bootstrap 4 Typeahead.

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 .dropdown-menu class. The original CSS adds 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" class="typeahead" 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()

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

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

Javascript Example


Loading a collection

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

Using JSON objects instead of simple strings

You can add all the properties you wish on your objects, as long as you provide a "name" attribute OR you provide your own displayText method. The other values allow you to match the selected item with something in your model.

var $input = $(".typeahead");
$input.typeahead({
  source: [
    {id: "someId1", name: "Display name 1"},
    {id: "someId2", name: "Display name 2"}
  ],
  autoSelect: true
});
$input.change(function() {
  var current = $input.typeahead("getActive");
  if (current) {
    // Some item from your model is active!
    if (current.name == $input.val()) {
      // This means the exact match is found. Use toLowerCase() if you want case insensitive match.
    } else {
      // This means it is only a partial match, you can either add a new item
      // or take the active if you don't want new items
    }
  } else {
    // Nothing is active so it is a new value (or maybe empty value)
  }
});

Options


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

If you are using jQuery in your application, note that camel case attributes such as data-minLength should be formatted as data-min-length. If you want more explanation, see this issue.

Name Type Default Description
source array, function [] The data source to query against. May be an array of strings, an array of JSON object with a name property 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. 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 or "all" false If hints should be shown as soon as the input gets focus. If set to true, all match will be shown. If set to "all", it will display all hints, not filtering them by the current text. This can be used when you want an input that behaves a bit like a combo box plus auto completion as you type to filter the choices.
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.
displayText function item.name || item Method used to get textual representation of an item of the sources. Accepts a single argument item and has the scope of the typeahead instance. Should return a String.
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.
afterSelect function $.noop() Call back function to execute after selected an item. It gets the current active item in parameter if any.
delay integer 0 Adds a delay between lookups.
appendTo jQuery element null By defaut, the menu is added right after the input element. Use this option to add the menu to another div. It should not be used if you want to use bootstrap dropup or dropdown-menu-right classes.
fitToElement boolean false Set to true if you want the menu to be the same size than the input it is attached to.
addItem JSON object false Adds an item to the end of the list, for example "New Entry". This could be used, for example, to pop a dialog when an item is not found in the list of data. Example: http://cl.ly/image/2u170I1q1G3A/addItem.png
changeInputOnSelect boolean true Put the selected value text representation in the input
changeInputOnMove boolean true Put the active value text representation in the input
openLinkInNewTab boolean false Open links in a new window/tab
selectOnBlur boolean true Automatically select the active value on blur
showCategoryHeader boolean true Show categories header in the dropdown menu

Methods


  • .typeahead(options): Initializes an input with a typeahead.
  • .lookup: To trigger the lookup function externally
  • .getActive: To get the currently active item, you will get a String or a JSON object depending on how you initialized typeahead. Works only for the first match.

Bower


To use with Bower. Add to your bower.json file:

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

AngularJS


An AngularJS directive for the Bootstrap 3 Typeahead jQuery plugin can be found at https://github.com/davidkonrad/angular-bootstrap3-typeahead.

Bloodhound


Bloodhound is the typeahead.js suggestion 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 Input is 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.com");
    }
  }
});

See also: #40

More Repositories

1

typeahead.js-bootstrap-css

LESS / CSS code for using typeahead.js with Bootstrap 3
CSS
191
star
2

jbst

Powerful theme framework that can be used as a standalone website builder or as a framework to create child themes for wordpress build on Twitter's Bootstrap 3. Full customizable with LESS
PHP
96
star
3

typeahead.js-bootstrap4-css

SCSS (Sass) / CSS code for using typeahead.js with Bootstrap 4
CSS
90
star
4

woocommerce-twitterbootstrap

This plugin wraps your Woocommerce views in the Twitter's Bootstrap Grid. Makes your views full responsive. No changes to your theme or other plugins needed.
PHP
85
star
5

non-responsive-tb3

Twitter's Bootstrap 3 without responsive features
CSS
68
star
6

wysihtml5-image-upload

Bootstrap Wysihtml5 with Custom Image Insert and Upload
JavaScript
59
star
7

generator-bootstrap4

Yeoman generator to scaffold out a front-end Bootstrap 4 Web app
JavaScript
38
star
8

bootstrap-a11y-theme

Make web accessibility (a11y) easier for Bootstrap Developers
CSS
32
star
9

empty-bootstrap-project-gulp

An empty new Bootstrap project. Powered by Panini, Sass and Gulp.
JavaScript
26
star
10

generator-foundation6

Yeoman generator to scaffold out a front-end Foundation 6 Web app
JavaScript
26
star
11

jqueryupload

jQuery upload is jQuery plug-in to upload files by the Ajax.
22
star
12

bootstrap-cli

Command-line interface for Bootstrap
JavaScript
21
star
13

flexboxgrid-less

Less code for the gridsystem of flexboxgrid.com
CSS
16
star
14

jbst-4-sass

JBST 4 Sass is a blank WordPress theme built with Bootstrap 4. Compile with Gulp and Sass.
PHP
14
star
15

less-plugin-group-css-media-queries

Adds the ability for less to be post-processed by group-css-media-queries
JavaScript
12
star
16

affix

Bootstrap 4 with jQuery Affix plugin. Powered by Panini, Sass and Gulp.
CSS
10
star
17

bootstrap-styleguide

Style guide for a new Bootstrap project. Powered by nunjucks and Sass.
JavaScript
8
star
18

grunt-scss2less

Convert SCSS (SASS) files to Less
JavaScript
7
star
19

twitters-bootstrap-shortcodes-ultimate

Add short codes for Twitter's Bootstrap 3 CSS and components to your site add-on for Shortcodes Ultimate.
PHP
7
star
20

less-plugin-csscomb

CSScomb plugin for less.js
JavaScript
7
star
21

bootstrap-responsive-ads

Bootstrap with reponsive banner ads
JavaScript
7
star
22

twitter-bootstrap-webshop-template

Twitter Boostrap Webshop Template with vertical menu
CSS
7
star
23

less-plugin-css-flip

Generate left-to-right (LTR) or right-to-left (RTL) CSS from Less using css-flip.
JavaScript
6
star
24

wp-lesscss

Implementation of LESS (Leaner CSS) in order to make themes development easier.
PHP
6
star
25

less-plugin-pleeease

Postprocess Less using pleeease.
JavaScript
6
star
26

less-plugin-ionic

Ionic Framework for less.js
CSS
5
star
27

jbst-masonry-theme

WordPress theme with Masonry -Cascading grid layout library-, Bootstrap 3 and Less
PHP
5
star
28

LESS-Zen-Grid

Implementation of Zen Grid in LESS, this so called CSS isolation, claims to fix the "sub-pixel rounding" problem.
CSS
5
star
29

wp-less-to-css

This plugin helps you to build and maintain your website with LESS.
PHP
4
star
30

twitter-bootstrap-slider

Add a responsive image slider to your pages based on Twitter's Bootstrap's Carousel component
PHP
4
star
31

wp-defer-loading

Defer loading javascript for WordPress. Without any additional library. Just the way Google ask you to do it.
JavaScript
4
star
32

jbst-weblog-theme

Wordpress theme build with Bootstrap 4 and JBST 4.
PHP
3
star
33

Boilerplate-JBST-Child-Theme

Sample child theme for Jamedo's Bootstrap Start Theme (JBST).
CSS
3
star
34

twitter-bootstrap-galleries

Wraps the content of a WordPress media gallery in a Twitter's Bootstrap grid. And make it full responsive.
PHP
3
star
35

less-plugin-skeleton

Skeleton for less.js
CSS
3
star
36

less-plugin-cubehelix

cubehelix plugin for less.js
JavaScript
3
star
37

twitter-bootstrap-onepage-template

Twitter Bootstrap One Page Sale Template
JavaScript
3
star
38

jbst-e-commerce-child-theme

E-Commerce; sample child theme for Jamedo's Bootstrap Start Theme (JBST).
JavaScript
2
star
39

brunch-bootstrap4

Brunch skeleton using Bootstrap 4
HTML
2
star
40

jbst-1pxdeep-theme

WordPress theme, designing with color schemes (1pxdeep), Bootstrap 3 and Less.
PHP
2
star
41

jbst-4-css-flexbox

JBST 4 is a blank WordPress theme built with Bootstrap 4 and flexbox support.
CSS
2
star
42

bootstrap-1pxdeep

1pxdeep integration for Bootstrap 4, based on relative color design.
CSS
2
star
43

asch-marriage-dapp

Asch Marriage Dapp to demonstrate smart contacts on the Asch side chain technology.
HTML
2
star
44

less-plugin-bootstrap

Imports Bootstrap Less code before your custom Less code.
JavaScript
2
star
45

less-plugin-cardinal

Cardinal CSS for less.js
CSS
1
star
46

asch-test-assets

How to create smart contracts for assets on the Dapp sidechain with Asch
HTML
1
star
47

less-plugin-flexboxgrid

Flexbox grid from flexboxgrid.com for less.js
JavaScript
1
star
48

empty-bootstrap-project

An empty new Bootstrap project. Powered by nunjucks, Sass and Grunt.
CSS
1
star
49

less-plugin-csswring

Compresses the css output from Less using csswring.
JavaScript
1
star
50

bootstrap-material-design-styleguide

Basic template for a new Material Design for Bootstrap project. Powered by nunjucks and Sass.
JavaScript
1
star
51

bootstrap-weblog

Bootstrap 4 Weblog template
CSS
1
star
52

jbst-4

JBST 4 is a blank WordPress theme built with Bootstrap 4.
CSS
1
star
53

custom-bootstrap-editor

Add Twitter's Bootstrap CSS with LESS editor to your site.
CSS
1
star
54

Bootstrap-prefixed-Less

Add the same browser prefixes to your CSS with Less instead of the Autoprefixer (since Bootstrap 3.2.0)
CSS
1
star
55

howto-asch-docs

Personal docs for ASCH Dapp development
1
star
56

asch-mini-dao

This example shows how to create a new type transaction or smart contract, and demostrates a mini decentralized autonomous organization (dao) project with project management and voting function.
HTML
1
star
57

less-plugin-semantic-ui

Imports Semantic UI Less code before your custom Less code.
JavaScript
1
star
58

bootstrap-one-page-marketing-design

Simple One Page Marketing Website Design powered Bootstrap 4. It includes a Sass compiler and a set of Panini HTML templates for you. [Panini](https://github.com/zurb/panini) is a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON or YAML.
CSS
1
star