Question

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

我们已经实施了本地存储解决方案，以便在缓慢的连接上顺利进行，但在尝试对类型提示进行自定义过滤时我们遇到了问题

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

我的代码基于plunker

中的this question

我非常确定这只是我忽视的一个愚蠢的事情，但我现在已经很长时间了，并且无法找到它

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);

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

1 个答案: