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

How can I write an angularjs filter to search for string fragments/sequences of strings

本文关键字：字符串 片段 搜索 何编写 angularjs 过滤器      更新时间：2023-09-26

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

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

在任何情况下，都应返回包含

该字母或片段的所有国家/地区，因此"E"将返回"英格兰"，"爱沙尼亚"等，而"lan"将返回"英格兰"，"爱尔兰"等。

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

  1. 模板：

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

  2. 角度简斯

    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;
};
}]);

它比这简单得多，使用 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);
});

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;
    }
}]);

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

相关文章：