Angular JS中的搜索框 [英] Search box in angular js

问题描述

我想在我的angularJs应用程序中实现一个搜索框.用户一开始在搜索框中输入一些名称，就应该调用REST服务，并且它应该获取所有与在搜索文本框中键入的名称匹配的名称.请注意，没有按钮，用户开始输入后，结果应自动出现. REST服务已经在那里.我只需要在用户开始键入内容并以列表形式返回结果时调用REST服务. 例如:-如果我输入James，则所有以James开头的用户都将出现在搜索框中.

I want to implement a search box in my angularJs application. As soon as user starts typing some name in the search box , some REST service should be called and it should fetch all the names which matches the name typed in the search text box. Note that there is no button , the result should come automatically as soon as user starts typing. The REST service is already there. I just need to invoke the REST service when the user starts typing and return the result as a list. For ex:- If I type James then all the user whose name starts with James should come as a list in the search box.

一旦出现名称列表，用户就可以单击名称之一，并且他的信息应加载到当前页面中.

Once the list of name comes , the user can click on one of the name and his information should be loaded in the current page.

如何在angular js中实现这种键入搜索框?有任何指令吗?谁能给我一些指导.

How can I implement such type-on search box in angular js? Is there any directive for it? Can anyone please give me some direction.

推荐答案

您应该定义一个监听onkeypress的指令.

You should define a directive that listen 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()">   

CONTROLLER

$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个键会很高兴，

Would be nice to wait until 3 keys has been typed, for that in directive:

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提前输入 希望对您有帮助

Perhaps, exists typeahead directive from angular-ui that you can use: angular-ui typeahead I hope it helps you

这篇关于Angular JS中的搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！