Come posso scrivere un filtro angularjs per cercare frammenti/sequenze di stringhe

Question

Sto provando a scrivere un filtro personalizzato angularjs che controlla se un array di paesi contiene una stringa di ricerca immessa dall'utente.

La stringa può essere costituita da una lettera (ad esempio "E"), o un frammento di n lettere (ad esempio "lan") o un'intera parola (ad esempio "Inghilterra").

In ogni caso, tutti i paesi contenenti quella lettera o quel frammento devono essere restituiti, quindi "E" restituirebbe "Inghilterra", "Estonia" ecc. Mentre "lan" restituire "Inghilterra", "Irlanda", ecc

Finora il mio filtro restituisce l'intero paese o singole lettere ma sto avendo difficoltà con frammenti di stringa:

1. HTML Template:

   <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

è molto più semplice di quello, utilizzare il String.indexOf() funzione:

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

Si consiglia di attivare entrambe le stringhe .toLowerCase() per fare case-insensitive matching:

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

Answer 2

Date un'occhiata alla Angular-UI-Bootstrap direttiva per typeahead fa esattamente ciò che si vuole: 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; 
    } 
}]);