web-dev-qa-db-fra.com

Comment puis-je écrire un filtre angularjs pour rechercher des fragments de chaîne/séquences de chaînes

J'essaie d'écrire un filtre personnalisé angularjs qui vérifie si un tableau de pays contient une chaîne de recherche entrée par l'utilisateur. 

La chaîne peut consister en une lettre (par exemple «E») ou un fragment de n-lettres (par exemple «lan») ou un mot entier (par exemple «Angleterre»). 

Dans tous les cas, tous les pays contenant cette lettre ou ce fragment doivent être renvoyés, ainsi "E" renverra "Angleterre", "Estonie", etc.

Jusqu'à présent, mon filtre renvoie le pays entier ou des lettres simples, mais j'ai des difficultés avec les fragments de chaîne:

  1. Modèle HTML:

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

C'est beaucoup plus simple, utilisez la fonction String.indexOf():

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

Vous voudrez peut-être transformer les deux chaînes .toLowerCase() pour effectuer une correspondance sans distinction de casse:

searchText = searchText.toLowerCase();
angular.forEach(items, function(item) {
    if( item.label.toLowerCase().indexOf(searchText) >= 0 ) filtered.Push(item);
});
25
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

Regardez la directive Angular-UI-Bootstrap pour typeahead elle fait exactement ce que vous voulez: http://angular-ui.github.io/bootstrap/#/typeahead

0
m.e.conroy