Skip to content

Latest commit

 

History

History
92 lines (67 loc) · 3.86 KB

readme.md

File metadata and controls

92 lines (67 loc) · 3.86 KB

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.

The typeahead directives provide several attributes:

  • 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

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

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

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

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

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

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

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

  • typeahead-min-length (Defaults: 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 (Defaults: angular.noop) : Binding to a variable that indicates if no matching results were found

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

  • typeahead-select-on-exact (Defaults: false) : Should it automatically select an item when there is one option that exactly matches the user input?

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

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

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

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

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

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

  • typeahead-show-hint (Defaults: false) : Should input show hint that matches the first option?