如何编写 angularjs 过滤器来搜索字符串片段/字符串序列

Question

我正在尝试编写一个 angularjs 自定义过滤器，用于检查国家/地区数组是否包含用户输入的搜索字符串。

字符串可以由一个字母组成（例如“E”），或 n 个字母的片段（例如“lan”）或整个单词（例如“England”）。

在每种情况下，都应返回包含该字母或该片段的所有国家/地区，因此“E”将返回“England”、“Estonia”等，而“lan”将返回“England”、“Ireland”等.

到目前为止，我的过滤器返回整个国家或单个字母，但我在处理字符串片段时遇到了困难：

1. HTML 模板：

   <input ng-model="filter.text" type="search" placeholder="Filter..."/>
   
   <ul>
      <li ng-repeat="item in data | listfilter:filter.text">
   </ul>
   

2. angularJS

   angular.module('sgComponents').filter('listfilter',[ function () {
   return function(items, searchText) {
       var filtered = [];            
   
       angular.forEach(items, function(item) {
           if(item.label === searchText) { // matches whole word, e.g. 'England'
               filtered.push(item);
           }
           var letters = item.label.split('');
           _.each(letters, function(letter) {
               if (letter === searchText) { // matches single letter, e.g. 'E'
                   console.log('pushing');
                   filtered.push(item);
               }
           });
           // code to match letter fragments, e.g. 'lan'
       });
       return filtered;
   };
   }]);
   

Answer 1

比这简单多了，使用String.indexOf()函数：

angular.forEach(items, function(item) {
    if( item.label.indexOf(searchText) >= 0 ) filtered.push(item);
});

您可能希望将两个字符串都转换为.toLowerCase() 以进行不区分大小写的匹配：

searchText = searchText.toLowerCase();
angular.forEach(items, function(item) {
    if( item.label.toLowerCase().indexOf(searchText) >= 0 ) filtered.push(item);
});

Answer 2

angular.module('sgComponents').filter('listfilter',[ function () {
    return function(items, searchText) {
        var filtered = []; 
        var regex = new RegExp(".*" + searchItem + ".*", "ig");
        angular.forEach(items, function(item) {
            if(regex.test(item)){
                filtered.push(item);
            }
        });
        return filtered;
    }
}]);

Answer 3

查看 typeahead 的 Angular-UI-Bootstrap 指令，它完全符合您的要求：http://angular-ui.github.io/bootstrap/#/typeahead