带有过滤器的角度自动完成：搜索答案

【问题标题】：Angular autocomplete with filter:search带有过滤器的角度自动完成：搜索
【发布时间】：2015-02-03 19:28:08
【问题描述】：

我正在使用 $http 在“filter:search”和我的服务器请求之间寻找一个“事件”。

就像每次输入按键时的“自动完成”一样，我的 $http 应该启动一个新请求

<input ng-model="search">
<li ng-repeat="friend in friends | filter:search">
  {{friend.name}}
</li>

伪代码..

// set inputdata
var sPostData = "filter:search";

$http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded";

$http.post(sUrl,sPostData).then(function(friendsResponse) {
 $scope.friends = friendsResponse.data.ResultSet.result;


});

是否有任何提示或示例可以做到这一点或错误的概念？

【问题讨论】：

你考虑过引导输入吗？

标签： javascript angularjs autocomplete

【解决方案1】：

如果您想通过 AJAX 数据加载来实现类似自动建议的功能，那么 Angular 过滤器不适合此工具。相反，您可以使用$scope.$watch 表达式：

$scope.$watch('search', function(newValue, oldValue) {
    if (newValue !== oldValue) {
        $http.post(sUrl, {filter: $scope.search}).then(function(friendsResponse) {
            $scope.friends = friendsResponse.data.ResultSet.result;
        });
    }
});

以及对应的HTML：

<input ng-model="search" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }">

<li ng-repeat="friend in friends">
    {{friend.name}}
</li>

请注意，您不再需要 | filter:search 部分。我还添加了 ngModelOptions 以获得更好的体验。

【讨论】：

【解决方案2】：

你可以使用ng-change指令即

HTML：

<input ng-model="search" ng-change="getData()">
<li ng-repeat="friend in friends | filter:search">
      {{friend.name}}
</li>

JS：

//call server on 'search' change

$scope.getData = function(){

    $http.post(.....)

}

【讨论】：