Wie schreibe ich einen angularjs Filter, um nach Stringfragmenten/Sequenzen von Strings zu suchen

Question

Ich versuche, einen angularjs benutzerdefinierten Filter zu schreiben, der überprüft, ob ein Array von Ländern einen vom Benutzer eingegebenen Suchstring enthält.

Die Zeichenfolge kann aus einem Buchstaben (z. B. "E") oder einem Fragment aus n-Buchstaben (z. B. "lan") oder einem ganzen Wort (z. B. "England") bestehen.

In jedem Fall sollten alle Länder, die diesen einen Buchstaben oder dieses Fragment enthalten, zurückgegeben werden, so würde "E" "England", "Estland" usw. zurückgeben, während "lan" "England", "Irland", zurückkehren würde.

usw.

Bisher mein Filter gibt das ganze Land oder einzelne Buchstaben, aber ich habe Probleme mit String-Fragmente:

1. HTML-Vorlage:

   <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

Es ist viel einfacher als das, verwenden Sie die String.indexOf() Funktion:

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

Sie können beide ZeichenfolgendrehenGroß- und Kleinschreibung Anpassung zu tun:

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

Answer 2

Werfen Sie einen Blick auf die Angular-UI-Bootstrap-Direktive für typeahead ist es genau das, was Sie wollen: http://angular-ui.github.io/bootstrap/#/typeahead

Answer 3

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