使用带有 api 回调函数的 angular-ui bootstrap typeahead答案

【问题标题】：Use angular-ui bootstrap typeahead with api callback function使用带有 api 回调函数的 angular-ui bootstrap typeahead
【发布时间】：2017-05-12 14:47:55
【问题描述】：

我正在尝试向我的项目添加一个预先输入控件。我尝试使用过滤器选项，但有时结果在数千个范围内，这使我的应用程序的性能非常糟糕

所以我要使用异步方法。

这里的问题是，我不能使用$http服务来消费api，我需要使用客户专有的方法，由于授权的原因，它没有返回一个promise，我需要通过一个成功和失败回调函数以获取结果。

这是我预先输入的结构

<div class="input-group typeahead">
                        <input type="text" class="form-control" ng-model="stopToEdit.STOP_SITE" uib-typeahead="site.SITE_CODE as site.SITE_NAME for site in sites" ng-keyup="fnGetSites(stopToEdit.STOP_SITE, stopToEdit.STOP_TYPE)"
                               typeahead-loading="loadingLocations" typeahead-no-results="noResults" typeahead-popup-template-url="siteList.html" />
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" ng-click="fnSearchSites()"><span class="fa fa-binoculars"></span></button>
                        </span>
                    </div>

这是我为了填充站点数组而调用的方法

$scope.fnGetSites = function (val, stopType) {
        if (val === '') {
            $scope.sites = null;
            return;
        } else if (val.length < 4) {
            $scope.sites = null;
            return;
        }
        $scope.showLoadingSpinner = true;
        blockUIOnCall = false;
        customerPropietaryObject.get(<api rest url to consume>, function (results) {
            $scope.sites = results;
            $scope.$digest();
        }, $scope.fnShowErroMsg);
    }

问题是，结果存储正确，但$digest 和$apply 目前都无法显示结果。我需要执行另一个操作，例如在文本框中写入另一个字符或激活字段 blur 以显示结果。

所以，如果我写“stev”，我会得到结果，但在我写“steve”之前，我会得到“stev”的结果

知道如何解决和完成这个问题吗？

谢谢

【问题讨论】：

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

好吧，经过几天的抛诸脑后，专注于其他事情，我终于决定尝试解决它。

最终的解决方案很简单，我只需要创建自己的promise作为起点，并将我的客户端专有方法转换为promise，最终得到

var prom = new Promise(function (resolve, reject) {
            customerPropietaryObject.get(<api rest url to consume>, function (results) { resolve(results) }, function (data) { reject(data) });
        });
        return prom.then(function (results) {            
            return results;
        });

现在，我只需要弄清楚如何将数据显示为 KEY | VALUE 的列表，因为自动完成的查询是因为 key 或 value 包含文本字段文本

【讨论】：