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

I'm trying to write an angularjs custom filter that checks whether an array of countries contains a search string entered by the user.

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

The string can consist of one letter (e.g. 'E'), or a fragment of n-letters (e.g. 'lan') or an entire word (e.g. 'England').

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

In every case, all countries containing that one letter or that fragment should be returned, so 'E' would return 'England', 'Estonia' etc. while 'lan' would return 'England', 'Ireland', etc.

在每种情况下，所有包含该一个字母或该片段的国家都应归还，因此“E”将返回“England”，“Estonia”等，而“lan”将返回“England”，“Ireland”等。

So far my filter returns the entire country or single letters but I'm having difficulty with string fragments:

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

HTML Template:

HTML模板：

<input ng-model="filter.text" type="search" placeholder="Filter..."/>

<ul>
   <li ng-repeat="item in data | listfilter:filter.text">
</ul>

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

3 个解决方案

#1

It is much simpler than that, use the String.indexOf() function:

它比这简单得多，使用String.indexOf（）函数：

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

You may want to turn both strings .toLowerCase() to do case-insensitive matching:

您可能希望将两个字符串.toLowerCase（）转换为不区分大小写的匹配：

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

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

#3

Take a look at the Angular-UI-Bootstrap directive for typeahead it does exactly what you want: http://angular-ui.github.io/bootstrap/#/typeahead

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

#1