Examples

Add quick, dynamic typeahead functionality with any form text input.

Plugin dependency

Selects require the tooltip module and parseOptions helper module to be loaded.

Live demo

$scope.selectedState = "{{selectedState}}";
$scope.states = {{states}};

$scope.selectedIcon = "{{selectedIcon}}";
$scope.icons = "{{icons}}";

$scope.selectedAddress = "{{selectedAddress}}";

Usage

Append a bs-typeaheadattribute to any element to enable the directive.

The module exposes a $typeaheadservice

Available for programmatic use (mainly in directives as it requires a DOM element).

        
          var myTypeahead = $typeahead(element, {controller: someModelController});
        
      

Options

Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to data-, as in data-animation="".

This module supports exotic placement options!

You can position your typeahead in corners (such as bottom-left) or any other combination two.

Exotic placement options are not part of the Bootstrap's core, to use them you must use bootstrap-additions.css from the BootstrapAdditions project. This project being not yet fully released, meanwhile, you can use the development snapshot compiled for theses docs.

Name type default description
animation string am-fade apply a CSS animation powered by ngAnimate
placement string 'bottom-left' how to position the typeahead - top | bottom | left | right, or any combination like bottom-left.
trigger string 'focus' how typeahead is triggered - click | hover | focus | manual
html boolean false replace ng-bind with ng-bind-html, requires ngSanitize to be loaded
delay number | object 0

delay showing and hiding the typeahead (ms) - does not apply to manual trigger type

If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { show: 500, hide: 100 }

container string | false false

Appends the typeahead to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the typeahead in the flow of the document near the triggering element - which will prevent the typeahead from floating away from the triggering element during a window resize.

template path | id '$typeahead'

If provided, overrides the default template, can be either a remote URL or a cached template id.

limit number 6

The max number of items to display in the dropdown.

minLength number 1

The minimum character length needed before triggering autocomplete suggestions.

Default options

You can override global defaults for the plugin with $typeaheadProvider.defaults

        
          angular.module('myApp')
          .config(function($typeaheadProvider) {
            angular.extend($typeaheadProvider.defaults, {
              animation: 'am-flip-x',
              minLength: 2,
              limit: 8
            });
          })