當用戶輸入速度非常快時，Typeahead不起作用

我正在使用typeahead，在搜索框中輸入其顯示建議的位置，同時從服務器獲取建議。當用戶輸入速度非常快時，Typeahead不起作用

它的工作正常，除非用戶類型真的很快。例如，如果我們鍵入風暴它顯示記錄。當輸入速度相同的單詞時，在響應中收到數據時，不會顯示其建議。我已經通過打印JSON在盒子上方進行檢查，因此當我快速寫下暴風雨時，它顯示JSON但未顯示以下建議。

下面是HTML

<input type="text" ng-model="header.search" 
    typeahead-on-select="searchClicked($item)" 
    uib-typeahead="state as state.data.name for state in suggestions | filter:$viewValue | limitTo:8" 
    typeahead-min-length="0" placeholder="Søg..." search-products>

搜索產品是指令中使用廣播搜索值。這是指令代碼。

APP.directive('searchProducts', searchProducts); 
function searchProducts($state) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      scope.$watch(attrs.ngModel, function(searchVal) { 
       scope.$broadcast('searchTheProducts', searchVal); 
      }); 
     } 
    }; 
}

這裏是我們獲取數據的服務調用。

$scope.$on('searchTheProducts', function(event, query) { 
    if (query) { 
     headerService.getSearchSuggestions(query).then(
      function(response) { 
       $scope.suggestions = response; 
      }, 
      function(err) { 
       console.log('Error: ' + err); 
      } 
     ); 
    } 
});

這裏是業務邏輯

function getSearchSuggestions(query) { 
    pendingRequests.cancelAll(); 
    var url = ApiBaseUrl + "/search/suggestions?query=" + query; 
    var deferred = $q.defer(); 
    pendingRequests.add({ 
     url: url, 
     canceller: deferred 
    }); 

    pending = true; 
    $http({ 
     method: "GET", 
     url: url, 
     timeout: deferred.promise 
    }).then(
     function(successData) { 

      deferred.resolve(successData.data.data); 
     }, 
     function(err) { 

      deferred.reject(err); 
     } 
    ); 
    return deferred.promise; 
}

來源

2016-10-05 naCheex

您可以在您的網頁上添加「

{{header.search}} | {{suggestions|json}}

」並向我們展示快速輸入時的輸出內容嗎？ –

ston | [ { 「類型」：「產品」，「數據」：{ 「名」：「石器時代鋼琴」 } }， { 「類型」：「主管部門」，「數據」：{ 「名」：「石器時代減肥食品」 } } ] – naCheex

我寫了斯通的顯示輸出，但在dropownlist深藏不露，當我按下退格突然其顯示 – naCheex

我不認爲你需要自定義指令火$http調用獲取結果，只要您輸入值changes.Instead你可以做如下

<input type="text" ng-model="header.search" 
    typeahead-on-select="searchClicked($item)" 
    uib-typeahead="state as state.data.name for state in suggestions($viewValue) | filter:$viewValue | limitTo:8" 
    typeahead-min-length="0" placeholder="Søg..." >

在您的JS控制器，你可以寫函數$scope.suggestions()獲取上查詢類型的新成果。

var app = angular.module('plunker', ['ui.bootstrap']); 

    app.factory('dataProviderService', ['$http', function($http) { 
     var factory = {}; 
     factory.getCities = function(input) { 
      //I've used google api to fetch cities ..we can place our service call here.. 
      return $http.get('//maps.googleapis.com/maps/api/geocode/json', { 
       params: { 
        address: input, 
        sensor: false 
       } 
      }).then(function(response) {//on success the results can be further processed as required.. 
       return response.data.results.map(function(item) { 
        return item.formatted_address; 
       }); 
      }); 

     }; 

     return factory; 
    }]); 

    app.controller('TypeaheadCtrl', ['$scope', '$log','$http', 'dataProviderService', function($scope, $log,$http, dataProviderService) { 
      $scope.suggestions= function(viewValue) { 
       //you can call your own service call via a factory 
      return dataProviderService.getCities(viewValue); 

      }; 

     }]);

下面是上面提到的方式工作樣例的DEMO，希望這有助於you.In這種方法沒有母校您鍵入的速度有多快，你總是會立即取新鮮的結果。

來源

2016-10-10 06:58:52

如何建議將填充特定查詢？ – naCheex

當你輸入它會自動從$ scope.suggestions中獲取結果，所以如果你的服務電話足以處理任何類型的輸入並返回結果，您將始終獲得結果。檢查重新啓動並嘗試輸入任何內容。 –

@naCheex是否適合您？ –

我不明白爲什麼你有：

angular.forEach(response, function(val, key) { 
    $scope.suggestions= response; 
});

如果response爲100個項目，然後由於某種原因你要更新$scope.suggestions每次和這可能是造成該問題。只需刪除angular.forEach，而只需$scope.suggestions = response。

來源

2016-10-07 09:33:21

是的我已經嘗試過沒有foreach，但它仍然當我第一次快速寫出3,4個字符時什麼都沒顯示，當我以正常速度輸入時，它的工作正常。 – naCheex

並且您的服務有請求嗎？ –

ya及其得到的迴應，我已通過在下拉菜單上方顯示它進行檢查。 – naCheex

你可以使用typeahead-wait-ms屬性，讓你不必在每次ketstroke上查詢：

<input typeahead-wait-ms="50">

來源

2016-10-07 09:58:30

嘗試但在我的情況下不工作:( – naCheex

當用戶輸入速度非常快時，Typeahead不起作用

回答

相關問題