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