Typeahead with AngularJS

Question

I'm trying to add autocomlete by typeahead to my project, but now it shows in the Dropdown [object Object]. Where am I wrong?

$scope.getUsers = function () {
        $scope.searchRequest = "/listaccounts.php?name=" + $scope.asyncSelected;
        console.log($scope.searchRequest);
        return $http.get($scope.searchRequest).then(function (response) {
            $scope.searchResults = response.data;
            return $scope.searchResults.records;
        });
    };

<input type="text" ng-model="asyncSelected" ng-change="asyncSelected = asyncSelected.toLowerCase()" name="user" class="form-control" aria-describedby="basic-addon1" autocomplete="off" uib-typeahead="name for name in getUsers($viewValue)">

JSON looks like:

{"records":[{"name":"q2q23w"},{"name":"qantheman"},{"name":"qee"},{"name":"qit"},{"name":"qiwi"}]}

I need to show in the dropdown only names.

This should work with uib-typeahead="user as user.name for user in getUsers($viewValue)" — choz
– choz, Commented Jan 28, 2017 at 9:41

Kuba Wyrostek · Accepted Answer · 2017-01-28 09:39:49Z

1

getUsers() is returning an array of objects and typeahead seems to have problem with this. Either @hadiJz solution will work (I don't know) or you could return a list of strings from getUsers() by changing to:

return $scope.searchResults.records.map(function(record) { return record.name; }));

answered Jan 28, 2017 at 9:39

Kuba Wyrostek

6,2311 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hadi · Accepted Answer · 2017-01-28 09:36:50Z

0

Try this

 uib-typeahead="name.name as name.name for name in getUsers($viewValue)">

answered Jan 28, 2017 at 9:36

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Comments

Sajeetharan · Accepted Answer · 2017-01-28 09:51:40Z

0

You can do,

 <input name="records" id="records" type="text" placeholder="enter a record" ng-model="selected" typeahead="record.name for record in records | filter:$viewValue | limitTo:8" class="form-control">

DEMO

answered Jan 28, 2017 at 9:51

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Collectives™ on Stack Overflow

Typeahead with AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related