Typeahead не работает, когда пользователь набирает очень быстро

Question

Я использую 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; 
} 

Answer 1

Я не думаю, что вам нужно пользовательские директивы уволить $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 этот подход не матер, как быстро вы печатаете, вы всегда будете получать свежие результаты мгновенно.

Answer 2

службы я не совсем уверен, почему у вас есть:

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

Если response 100 пунктов, то по какой-то причине вы обновляете $scope.suggestions каждый раз, и этот может быть проблемой. Просто удалите angular.forEach и просто введите $scope.suggestions = response.

Answer 3

Вы можете использовать атрибут typeahead-wait-ms, так что вы не запрашивая на каждом ketstroke:

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