Angular ui-bootstrap typeahead is a great library and I like the fact that it imitates the syntax inside Angular select directive. Still it seems that this imitation is not perfect. Do I undertand correctly that I can't use this object as the source for the typeahead?

var myObject= 
{
       '41': { term: 'cell morphological classification specialist'},
       '42': { term: 'classification specialist'},
       '43': { term: 'cell electrophysiological classification specialist'},
       '44': { term: 'cell morphological reconstruction specialist'},
       '45': { term: 'cell electrophysiology recording specialist'},

}

If I used angular select directive, I'd just use the following construction to load this object as possible options:

select id as details.term for (id , details) in myObject

Does it implies that I have to avoid such objects in my application and use this form instead?

 [
   {id: '41', term: 'cell morphological classification specialist'},
   {id: '42', term: 'classification specialist'},
   {id: '43', term: 'cell electrophysiological classification specialist'},
   {id: '44', term: 'cell morphological reconstruction specialist'},
   {id: '45', term: 'cell electrophysiology recording specialist'},
 ];

Angular ui-bootstrap typeahead is a great library and I like the fact that it imitates the syntax inside Angular select directive. Still it seems that this imitation is not perfect. Do I undertand correctly that I can't use this object as the source for the typeahead?

var myObject= 
{
       '41': { term: 'cell morphological classification specialist'},
       '42': { term: 'classification specialist'},
       '43': { term: 'cell electrophysiological classification specialist'},
       '44': { term: 'cell morphological reconstruction specialist'},
       '45': { term: 'cell electrophysiology recording specialist'},

}

If I used angular select directive, I'd just use the following construction to load this object as possible options:

select id as details.term for (id , details) in myObject

Does it implies that I have to avoid such objects in my application and use this form instead?

 [
   {id: '41', term: 'cell morphological classification specialist'},
   {id: '42', term: 'classification specialist'},
   {id: '43', term: 'cell electrophysiological classification specialist'},
   {id: '44', term: 'cell morphological reconstruction specialist'},
   {id: '45', term: 'cell electrophysiology recording specialist'},
 ];

• javascript
• angularjs
• twitter-bootstrap
• angular-ui-bootstrap

2 Answers 2

It seems ui.bootstrap's typeahead only works with an array as its source.

From the documentation :

Supported expressions are:

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

Now one of things you can do with typeahead is call a function to return an array :

    <input type="text" ng-model="selected3" typeahead="object.term for object in transformationFunction(myObject, $viewValue) | filter:{term:$viewValue}""  class="form-control">

And the function

$scope.transformationFunction = function(object, val) {
  var newArray = [];
  for(var key in object) {
    newArray.push({id: key, term: object[key].term});
  }
  return newArray;
};

That's not the most generic function out there, but you can then think of ways to make it more generic, depending on your own data.

Working demo

Actually it does not work with objects.
You can take a look at source code of typeahead:

angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position', 'ui.bootstrap.bindHtml'])

  .factory('typeaheadParser', ['$parse', function ($parse) {

  var TYPEAHEAD_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+([\s\S]+?)$/;

  return {
    parse:function (input) {

      var match = input.match(TYPEAHEAD_REGEXP);
      if (!match) {
        throw new Error(
          'Expected typeahead specification in form of "_modelValue_ (as _label_)? for _item_ in _collection_"' +
            ' but got "' + input + '".');
      }

      return {
        itemName:match[3],
        source:$parse(match[4]),
        viewMapper:$parse(match[2] || match[1]),
        modelMapper:$parse(match[1])
      };
    }
  };
}])

So, you can see that it uses RegExp to check for input values.