当用户输入速度非常快时，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">