在angularJs中编写搜索文本框的正确方法

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

导读：我的应用程序的几个部分中的一个非常常见的功能是一个搜索框,它接受一个字符串,然后根据字符串过滤一个表. 我的目标是能够允许用户输入内容并在几毫秒的延迟后自动更新结果.即无需点击输入按钮. 使用AngularJs过滤器可以完成数据的排序.但是,在我们更新过滤

我的应用程序的几个部分中的一个非常常见的功能是一个搜索框,它接受一个字符串,然后根据字符串过滤一个表.

我的目标是能够允许用户输入内容并在几毫秒的延迟后自动更新结果.即无需点击输入按钮.

使用AngularJs过滤器可以完成数据的排序.但是,在我们更新过滤器之前,我相信我们首先要了解用户已完成输入并正在等待结果.

所以我绘制了将附加到搜索输入框的指令.

<input type="text"  update-filter placeholder="Enter search term">


 //and the directive goes like this
app.directive('updateFilter',[ '$timeout',function($timeout){
  var delay;
  return {
    link: function(scope,element){
         element.on('keypress',function(){
            if(!delay) {
                delay = $timeout(function() {
                  //perform the activity of updating the filter here
                 delay = undefined;
                },50);
           }
        }
     }
  }
});

我的问题是,这是解决这个问题的正确方法还是有更好的解决方案？

解决方法

你这太复杂了.角度可以更轻松地完成.

<input type="text" ng-model="query" ng-model-options="{ debounce: 200 }"
  ng-change="doSearch()">

使用$scope.query访问控制器中的查询.定义$scope.doSearch()进行搜索. debounce选项用于在用户完成输入后等待200ms.

（编辑：李大同）

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