StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAngularStrap typeahead with object types
text
Body
copied!<p>I'm using angular.js/angularstrap to fetch a list of tuples in the format <code>[{'name': 'name1', 'code': 'code1'}, {'name': 'name2', 'code': 'code2']</code> 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.</p> <p>Also, I'd like to update two separate fields with the values of the selected object.</p> <p>This question is very similar to <a href="https://stackoverflow.com/questions/16017531/typeahead-using-object-name">Typeahead using object name</a>, 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.</p> <p>Right now I have the following in my controller:</p> <pre><code>$scope.typeaheadFn = function(query, callback) { $http.get('/autocomplete?term='+query).success(function(items) { callback(items); }); } </code></pre> <p>, but this fails since the list <em>items</em> is a list of non-string objects. My HTML looks like: </p> <pre><code><input bs-typeahead="typeaheadFn" id="id_search" name="search" ng-model="search" type="text"> </code></pre> <p>and:</p> <pre><code><input type="text" value="{| search.code |}" disabled="disabled" placeholder="Code" /> <input type="text" value="{| search.name |}" disabled="disabled" placeholder="Name" /> </code></pre> <p>Any pointers? Thanks in advance.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload