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

Question

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

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

预先输入可以与本地值数组配合使用，但是由于排序不是很精确，因此用户感到沮丧，因为明显的匹配有时会显示最后的结果，或者只是在其他100多个结果中迷失了方向

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

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

我的代码是基于plunker从这个问题

我敢肯定，我只是忽略了一件愚蠢的事情，但是我已经呆了太久了，找不到它

Answer 1

预先输入可以与本地值数组配合使用，但是由于排序不是很精确，因此用户感到沮丧，因为明显的匹配有时会显示最后的结果，或者只是在其他100多个结果中迷失了方向

这意味着问题在于延迟。 您渲染了100-200个项目，此时用户输入新的输入，并且可能发生了您一个接一个的调用2次的情况。 因此，用户可以在新呼叫中获得旧结果。

我建议您将延迟时间设为300ms（标准的键入延迟时间），并使用$http config.timeout = cancelerEvent.promise来停止旧呼叫（如果有新呼叫）。

希望对你有帮助

---

[编辑]

大约延迟300秒

var timeoutHandlerFilterRowWatcher;

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

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