AngularJS Typeahead interface design

gistfile1.md

Examples

Simple, static array

 $scope.states = ['Alabama', 'California', 'Delaware', ...] 

would be used as:

<input ng-model='state' typeahead='states | filter:$viewValue'>

and model would be bound with a selected item from an array.

Simple array, retrieved from async call

 $scope.getStates = function($viewValue) {
   //hey, we can return promises and typeahead will understand them!
   return $http.get('/mybackend/states', {
    params : {query: $viewValue}
   }).then(function(response){
     //assuming that backend will return an array here
     //I can do any transformations, sorting, limiting etc. at this point
     return response.data; 
   });
 }

would be used as:

<input ng-model='state' typeahead='getStates($viewValue)'>

Static array of objects

 $scope.states = [{name: 'Alabama'}, {name: 'California'}, {name: 'Delaware'}, ...] 

would be used as:

<input ng-model='state' typeahead='state.name for state in states | filter:$viewValue>

Model will be bound with a full object, ex.: {name: 'California'}

Arrays of complex objects

 $scope.states = [{code: 'AL', name: 'Alabama'}, {code: 'CA', name: 'California'}, {code: 'DE', name: 'Delaware'}, ...] 

would be used as:

<input ng-model='state' typeahead='state.name+' ('+state.code+')' as state.code for state in states | filter:$viewValue | orderBy:"name"'>

Model will be bound with a state code, ex.: CA while label will be combination of a name and code: California (CA)

Arrays of complex objects retrieved via $http

<input ng-model='state' typeahead='state.name+' ('+state.code+')' as state.code for state in getStates($viewValue)'>

where the filtering and orderign would be done inside the getStates function.

General syntax

Generally spaking syntax is very similar to the one used by the <select> directive: http://docs.angularjs.org/api/ng.directive:select Those combination would be supported:

• typeahead='sourceExpression' - source for the typeahead, where sourceExpression can be either an array or a promie resolving to an array. A special variable $viewValue is available while evaluating this expression
• typeahead='labelExpression for tempVariable in sourceExpression'
• typeahead='labelExpression as modelToBeBound for tempVariable in sourceExpression'

All the filtering and ordering can be done in expressions so no options are needed for this. Same for higlighting (!).

The only options (other attributes) that would stay are:

• typeahead-min-length - The minimum character length needed before triggering autocomplete suggestions - defaults to 1
• typeahead-item-template - killer here - people could specify a template (or templateUrl!) for an individual item so people can add makup referencing other directives (for example.: ng-src to include images in typeahead results)

Hello,

I'm trying to use AngularJS typeahead with an array of complex objects.
But it doesn't work.

Plunker: http://plnkr.co/edit/X3C0fP52ZTi55LJtXfnu?p=preview

Could you please help me ?

Regards,
Agnes.