我想在我的angularJs应用程序中实现一个搜索框。一旦用户开始在搜索框中键入一些名称，就应该调用REST服务，并且它应该获取所有与在搜索文本框中键入的名称匹配的名称。请注意，没有按钮，用户开始输入后，结果应自动出现。REST服务已经在那里。我只需要在用户开始键入内容并以列表形式返回结果时调用REST服务。例如：-如果我输入James，则所有以James开头的用户都将出现在搜索框中。
名称列表出现后，用户可以单击名称之一，并且他的信息应加载到当前页面中。
如何在angular js中实现这种键入搜索框？有任何指令吗？谁能给我一些指导。
您应定义一个监听onkeypress的指令。
app.directive('myOnKeyDownCall', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
scope.$apply(function (){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
});
};
});
的HTML
<input type="text" my-on-key-down-call="callRestService()">
控制器
$scope.callRestService= function() {
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
$scope.results.push(data); //retrieve results and add to existing results
})
}
等待指令中键入3个键将是很好的，为此在指令中：
var numKeysPress=0;
element.bind("keydown keypress", function (event) {
numKeysPress++;
if(numKeysPress>=3){
scope.$apply(function (){
scope.$eval(attrs.myOnKeyDownCall);
});
event.preventDefault();
}
});
也许，存在您可以使用的angular-ui中的typeahead指令：angular-ui typeahead希望对您有所帮助
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句