web-dev-qa-db-ja.com

文字列フラグメント/文字列のシーケンスを検索するangularjsフィルタを作成するにはどうすればよいですか

国の配列にユーザーが入力した検索文字列が含まれているかどうかを確認する、angularjsカスタムフィルターを作成しようとしています。

文字列は、1文字（例： 'E'）、n文字の断片（例： 'lan'）、または単語全体（例： 'England'）で構成できます。

いずれの場合も、その1文字またはそのフラグメントを含むすべての国が返されるため、「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. アンギュラーJS

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

それよりもはるかに簡単です。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);
});
_
26
Nikos Paraskevopoulos
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;
    }
}]);
7
Manoj Nama

typeaheadのAngular-UI-Bootstrapディレクティブを見てください。これはまさにあなたが望むことをします： http://angular-ui.github.io/bootstrap/#/typeahead

0
m.e.conroy