2

I'm using angular.js/angularstrap to fetch a list of tuples in the format [{'name': 'name1', 'code': 'code1'}, {'name': 'name2', 'code': 'code2'] from a remote source. Now, it would be really nice to be able to to typeahead autocompletion in a combination of name and code. I.e. the query "name1" should fetch the first object and "code2" should return the second object.

Also, I'd like to update two separate fields with the values of the selected object.

This question is very similar to Typeahead using object name, but I can't get it to function with a remote source. I'm new to angular.js, and I'd really like to come up with a solution without falling back to jQuery.

Right now I have the following in my controller:

$scope.typeaheadFn = function(query, callback) {
    $http.get('/autocomplete?term='+query).success(function(items) {
        callback(items);
    });
}

, but this fails since the list items is a list of non-string objects. My HTML looks like: 

<input bs-typeahead="typeaheadFn" id="id_search" name="search" ng-model="search"  type="text">

and:

<input type="text" value="{| search.code |}" disabled="disabled" placeholder="Code" />
<input type="text" value="{| search.name |}" disabled="disabled" placeholder="Name" />

Any pointers? Thanks in advance.

Community
  • 1
  • 1
Søren V. Poulsen
  • 664
  • 5
  • 15

1 Answers1

0

I don't think the typeahead directive can support this out of the box. You can get around it pretty easily by reducing items to a simple array and passing reduced array to callback. If you really need the objects later, you could $scope.storedItem = items.

Langdon
  • 19,875
  • 18
  • 88
  • 107