使用 AngularJS 提前输入

Question

我正在尝试通过提前输入将自动完成添加到我的项目中，但现在它显示在下拉列表中 [object Object]。我哪里错了？

$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 看起来像：

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

我只需要在下拉列表中显示姓名。

Answer 1

试试这个

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

Answer 2

getUsers() 正在 returning 一个对象数组，提前输入似乎有问题。 @hadiJz 解决方案可以工作（我不知道），或者您可以 return 来自 getUsers() 的字符串列表，方法是更改为：

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

Answer 3

你可以的，

 <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

使用 AngularJS 提前输入

Typeahead with AngularJS

typeahead

angularjs

angular-ui-bootstrap