angularjs – 角度js中的搜索框

发布时间：2020-12-17 08:17:06 所属栏目：安全来源：网络整理

导读：我想在我的angularJs应用程序中实现一个搜索框。一旦用户在搜索框中输入一些名称，应该调用一些REST服务，并且应该获取与搜索文本框中输入的名称相匹配的所有名称。请注意，没有按钮，一旦用户开始输入，结果就会自动进入。 REST服务已经在那里了。当用户开

我想在我的angularJs应用程序中实现一个搜索框。一旦用户在搜索框中输入一些名称，应该调用一些REST服务，并且应该获取与搜索文本框中输入的名称相匹配的所有名称。请注意，没有按钮，一旦用户开始输入，结果就会自动进入。 REST服务已经在那里了。当用户开始输入并将结果作为列表返回时，我只需要调用REST服务。
例如： – 如果我输入詹姆斯，那么名字以James开头的所有用户都应该在搜索框中列出。

一旦名单出现，用户可以点击其中一个名称，他的信息应该加载到当前页面中。

如何在角度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()">

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键已经输入，在指令中：

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我希望它能帮助你

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!