Typeahead is a AngularJS version of Bootstrap v2's typeahead plugin. This directive can be used to quickly create elegant typeaheads with any form text input.

It is very well integrated into AngularJS as it uses a subset of the select directive syntax, which is very flexible. Supported expressions are:

• label for value in sourceArray
• select as label for value in sourceArray

The sourceArray expression can use a special $viewValue variable that corresponds to the value entered inside the input.

This directive works with promises, meaning you can retrieve matches using the $http service with minimal effort.

• ng-model $ - Assignable angular expression to data-bind to.

• ng-model-options $ - Options for ng-model (see ng-model-options directive). Currently supports the debounce and getterSetter options.

• typeahead-append-to $ (Default: null) - Should the typeahead popup be appended to an element instead of the parent element?

• typeahead-append-to-body $ (Default: false) - Should the typeahead popup be appended to $body instead of the parent element?

• typeahead-editable $ (Default: true) - Should it restrict model values to the ones selected from the popup only?

• typeahead-focus-first $ (Default: true) - Should the first match automatically be focused as you type?

• typeahead-focus-on-select(Default: true) - On selection, focus the input element the typeahead directive is associated with.

• typeahead-input-formatter(Default: undefined) - Format the ng-model result after selection.

• typeahead-is-open $ (Default: angular.noop) - Binding to a variable that indicates if the dropdown is open.

• typeahead-loading $ (Default: angular.noop) - Binding to a variable that indicates if matches are being retrieved asynchronously.

• typeahead-min-length $ (Default: 1) - Minimal no of characters that needs to be entered before typeahead kicks-in. Must be greater than or equal to 0.

• typeahead-no-results $ (Default: angular.noop) - Binding to a variable that indicates if no matching results were found.

• typeahead-should-select($event) $ (Default: null) - A callback executed when a keyup event that might trigger a selection occurs. Selection will only occur if this function returns true.

• typeahead-on-select($item, $model, $label, $event) $ (Default: null) - A callback executed when a match is selected. $event can be undefined if selection not triggered from a user event.

• typeahead-popup-template-url(Default: uib/template/typeahead/typeahead-popup.html) - Set custom popup template.

• typeahead-select-on-blur $ (Default: false) - On blur, select the currently highlighted match.

• typeahead-select-on-exact $ (Default: false) - Automatically select the item when it is the only one that exactly matches the user input.

• typeahead-show-hint $ (Default: false) - Show hint when the first option matches.

• typeahead-template-url(Default: uib/template/typeahead/typeahead-match.html) - Set custom item template.

• typeahead-wait-ms $ (Default: 0) - Minimal wait time after last character typed before typeahead kicks-in.

• uib-typeahead $ - Comprehension Angular expression (see select directive).

Notes

If a custom template for the popup is used, the wrapper selector used for the match items is the uib-typeahead-match class.