AngularJS-自動完成$ http請求

Question

我在AngularJS中有一個應用程序，我想為某些程序列表實現自動完成輸入。

我的問題是我的數據庫中有很多程序，並且我不想在頁面加載時全部加載它們。 取而代之的是，我加載頁面並有一個按鈕，單擊該按鈕可以加載下一頁。

scope.loadPrograms = function() {
    Programs.getPage($scope.page)
        .success(function(data) {
            $scope.allprograms.push.apply($scope.allprograms, data.campaigns);
            $scope.page++;
            if(data.pagination.pages < $scope.page) {
                $scope.page = -1;
            } 
        })
        .error(function(data){
            alert('There has been an error. Please try again later!');
        });
}

和按鈕

<md-button ng-click="loadPrograms()" ng-show="page != -1">Load more data</md-button>

因此，考慮到我並沒有在$scope上加載所有程序，因此這種方法使我每次在自動完成輸入中編寫/刪除字母時都發出請求。 可以發出這么多請求嗎？ 還有其他方法嗎？

謝謝。

編輯

好的，所以現在我延遲了自動完成功能，但是該方法不再起作用。

                // Search for programs
                scope.querySearch = function(query) {
                    if (typeof pauseMonitor !== 'undefined') {
                        $timeout.cancel(pauseMonitor); 
                    }

                    pauseMonitor = $timeout(function() {
                        var results = query ? scope.allprograms.filter(createFilterFor(query)) : [];
                        return results;
                    }, 250);

                };

                // Create filter function for a query string
                function createFilterFor(query) {
                  var lowercaseQuery = angular.lowercase(query);
                  return function filterFn(programs) {
                    return (programs.name.toLowerCase().indexOf(lowercaseQuery) != -1);
                  };
                };

它輸入createFilterFor方法，找到一個createFilterFor匹配項，但不再顯示。

Answer 1

如果您需要從大型數據庫中檢索一組單詞以實現自動完成，則一個簡單的技巧就是使用$timeout帶有一定的時間閾值，該閾值可以檢測用戶鍵入的暫停。

這樣做的目的是防止為每個鍵生成一個請求。 您在用戶鍵入模式中尋找一個停頓，然后在那里輸入鍵入的字母。 這是您的密鑰處理程序中該想法的簡單實現。

function processInput(input) {

     if (typeof pauseMonitor !== 'undefined') {
       $timeout.cancel(pauseMonitor); 


     pauseMonitor = $timeout(function() {
       //make your request here 
     }, 250);
}

Answer 2

看一下ng-model-options，您可以設置debounce time和其他一些有趣的事情。

ng-model-options="{ debounce: '1000' }"

上面的線表示輸入值將在1秒后在模型中更新