mgcrea.ngStrap.typeahead
Add quick, dynamic typeahead functionality with any form text input.
Selects require the tooltip module and parseOptions helper module to be loaded.
$scope.selectedState = "{{selectedState}}"; $scope.states = {{states}}; $scope.selectedIcon = "{{selectedIcon}}"; $scope.icons = "{{icons}}"; $scope.selectedAddress = "{{selectedAddress}}";
Append a bs-typeahead
attribute to any element to enable the directive.
$typeahead
serviceAvailable for programmatic use (mainly in directives as it requires a DOM element).
var myTypeahead = $typeahead(element, {controller: someModelController});
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=""
.
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 | auto, or any combination like bottom-left or auto bottom-left. When "auto" is specified, it will dynamically reorient the typeahead. For example, if placement is "auto left", the typeahead will display to the left when possible, otherwise it will display right. |
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:
|
container | string | false | false |
Appends the typeahead to a specific element. Example:
|
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. |
comparator | string | '' |
The name of the comparator function which is used in determining a match. |
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
});
})