bootstrap AngularJS uib-typeahead 上的异步请求

Question

我试图在服务器端搜索用户输入的名称，并使用 bootstrap 3 uib-typeahead 给出建议，但是（尽管我将值硬编码为 return - 出于测试目的），没有值 returning 到 typeahead 下拉列表。我的猜测是，因为这是一个异步请求，所以在检索请求数据时任何数据都已经 returned。

有什么方法可以在 typeahead 侦听的同时从服务器端检索数据？

$scope.test_search = function(test_name){
    var curr_url = '/plan/ajax/test/';

    var search_response =  $http.get(curr_url,{
        cache: true,
        params:{'name': test_name, 'csrfmiddlewaretoken': $cookies.csrftoken}
    }).then(function successCallback(response) {
        console.log(response.data);
        //return response.data;
        var test = [
            {country: "US", name : 'Alabama'}
        ];
        return test;

    }, function errorCallback(response) {
        alert('Error');
    });

},

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-lg-6">
    <pre>Model: {{new_ingredient_selected | json}}</pre>
    <input type="text"
           ng-model = "new_ingredient_selected"
           placeholder="test test"
           uib-typeahead="ingredient.name for ingredient in test_search($viewValue) |  filter:{name:$viewValue}"
           typeahead-loading="loadingLocations"
           typeahead-no-results="noResults"
           typeahead-on-select="onTypeaheadIngredientSelect($item, $label, $index)"
           typeahead-wait-ms ="400"
           class="form-control">

    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noResults">
      <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>
</div>

Answer 1

test_search函数需要一个return语句：

$scope.test_search = function(test_name){
    var curr_url = '/plan/ajax/test/';

    var search_response =  $http.get(curr_url,{
        cache: true,
        params:{'name': test_name, 'csrfmiddlewaretoken': $cookies.csrftoken}
    }).then(function successCallback(response) {
        console.log(response.data);
        //return response.data;
        var test = [
            {country: "US", name : 'Alabama'}
        ];
        return test;

    }, function errorCallback(response) {
        alert('Error');
        //IMPORTANT
        //RE-THROW the error
        ͟t͟h͟r͟o͟w͟ ͟r͟e͟s͟p͟o͟n͟s͟e͟;͟
    });

    //IMPORTANT
    //RETURN the promise
    ͟ ͟r͟e͟t͟u͟r͟n͟ ͟s͟e͟a͟r͟c͟h͟_͟r͟e͟s͟p͟o͟n͟s͟e͟;͟

};

当函数缺少 return 语句时，它 returns 的值为 undefined。

re-throw 拒绝处理程序中的错误响应也很重要。否则，被拒绝的 promise 将转换为一个 fulfilled promise，其解析值为 undefined。

bootstrap AngularJS uib-typeahead 上的异步请求

Asynchronous request on bootstrap AngularJS uib-typeahead

angularjs

bootstrap-typeahead

angular-ui-bootstrap

twitter-bootstrap-3