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

Question

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

我们已经实现了本地存储解决方案，以使其在慢速连接时保持流畅，但在尝试对预输入实现自定义过滤时遇到问题

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

浏览完这些库后，我找不到明显的方法来调整 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">

在我的 Controller 中:

    $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 中的列表值，可以很好地访问所有属性，但它不会将列表加载到预先输入下拉列表中。

我的代码基于 plunker来自this question

我很确定我忽略了一件愚蠢的事情，但我已经研究了太久了，却找不到它

Answer 1

The typeahead works fine with the local array of values, however as the sorting is not very precise, users get frustrated because the obvious match sometimes shows the very last or just gets lost amongst 100s of other results

这意味着问题出在延迟上。您渲染 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);