动态下拉列表 uib-typeahead in AngularJS.

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

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

Answer 1

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

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

我建议您延迟300ms(打字的标准延迟(，并在新呼叫到来时使用$httpconfig.timeout = cancelerEvent.promise停止旧呼叫。

希望会有所帮助

---

[编辑]

关于延迟 300 秒

var timeoutHandlerFilterRowWatcher;
if (timeoutHandlerFilterRowWatcher !== undefined) {
$timeout.cancel(timeoutHandlerFilterRowWatcher);
}
timeoutHandlerFilterRowWatcher = $timeout(function () {
// do your HTTP call
}, 300);