AngularJS中的动态下拉列表uib-typeahead

Question

我有一个处理一些大表的数据管理应用程序。

我们已经实施了本地存储解决方案，以使其在慢速连接时变得流畅，但在尝试对 typeaheads 实施自定义过滤时遇到了问题

typeahead 可以很好地处理本地值数组，但是由于排序不是很精确，用户会感到沮丧，因为明显的匹配有时会显示最后一个或只是在 100 多个其他结果中丢失

在浏览完这些库后，我找不到明显的方法来调整 Angular 实现的排序方法，因此我们决定使用用户输入动态创建列表，标记为：

<input type="text" class="form-control"
    placeholder="Search"
    ng-model="oi.clinicalDisorder"
    typeahead-wait-ms="1000"
    uib-typeahead="clinicalDisorder as clinicalDisorder.clinicalDisorderName for clinicalDisorder in startsWith($viewValue)  | limitTo:200"
    typeahead-editable="false">

在我的控制器中：

    $scope.startsWith = function(viewValue) {
            if (viewValue.length>3){
                return $http({
                      method: 'GET',
                      url: 'api/_search/clinical-disorders/'+viewValue})
                      .then(function successCallback(response) {
                          $scope.dynamicClinicalDisorders = response.data;
                          return $scope.dynamicClinicalDisorders;
                            },
                          function errorCallback(response) {
                                console.log(response);
                            });
                        }
                    };

后端查询工作正常

在客户端，它打印出$scope.dynamicClinicalDisorders 中列表的值，访问所有属性就好了，但它不会将列表加载到预先输入的下拉列表中。

我的代码基于来自this question的plunker

我很确定我忽略了这件愚蠢的事情，但我已经做了太久了，找不到它

Answer 1

typeahead 可以很好地处理本地值数组，但是由于排序不是很精确，用户会感到沮丧，因为明显的匹配有时会显示最后一个或只是在 100 多个其他结果中丢失

这意味着问题在于延迟。您呈现 100-200 个项目，此时用户键入新输入，并且可能发生您一个接一个地进行 2 个调用。因此用户可以在新呼叫中获得旧结果。

我建议你延迟 300 毫秒（打字的标准延迟）并使用 $http config.timeout = cancelerEvent.promise 来停止旧电话，如果新电话来了。

希望对你有帮助

---

[编辑]

大约延迟 300 秒

var timeoutHandlerFilterRowWatcher;

 if (timeoutHandlerFilterRowWatcher !== undefined) {
    $timeout.cancel(timeoutHandlerFilterRowWatcher);
  }

timeoutHandlerFilterRowWatcher = $timeout(function () {
      // do your HTTP call
}, 300);