Angular 使用 filter:search 自动完成
Angular autocomplete with filter:search
我正在使用 $http."filter:search" 和我的服务器请求之间寻找 "event"。
喜欢 "autocomplete" 每次输入击键我的 $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;
});
是否有任何提示或示例可以做到这一点或错误的概念?
您可以使用 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(.....)
}
如果您想通过 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 以获得更好的体验。
我正在使用 $http."filter:search" 和我的服务器请求之间寻找 "event"。
喜欢 "autocomplete" 每次输入击键我的 $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;
});
是否有任何提示或示例可以做到这一点或错误的概念?
您可以使用 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(.....)
}
如果您想通过 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 以获得更好的体验。