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

我不认为您需要一个自定义指令来触发,mtcbSiteColSearchCondition.SelectedItem.ToString());调用，以便在您的输入值发生变化时获取结果。相反，您可以执行以下操作

$http

在JS控制器中，您可以编写函数<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..." >以获取查询类型的新结果。

$scope.suggestions()

以下是上述方式的工作样本的DEMO，希望这对您有所帮助。在这种方法中，无论您输入多快，都会立即获取新的结果。

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">

当用户输入速度非常快时，Typeahead不起作用

3 个答案: