Comment puis-je écrire un angularjs filtre pour rechercher des fragments de chaîne/séquences de chaînes
Je suis en train d'écrire un angularjs filtre personnalisé qui vérifie si un éventail de pays contient une chaîne de recherche est entré 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 (par exemple l'Angleterre).
Dans tous les cas, tous les pays contenant une lettre ou un fragment doit être retourné, de sorte que le " E " serait de retour 'Angleterre', 'Estonie", etc. tout en " lan " serait de retour 'Angleterre', 'Irlande', etc.
Jusqu'à présent, mon filtre retourne l'ensemble du pays ou d'une seule lettre, mais je vais avoir de la difficulté avec les fragments de chaîne:
- Modèle 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; }; }]);
OriginalL'auteur Tone | 2013-10-16
Vous devez vous connecter pour publier un commentaire.
Il est beaucoup plus simple que cela, utilisez le
String.indexOf()
fonction:Vous souhaiterez peut-être activer les deux chaînes
.toLowerCase()
faire insensible à la casse:OriginalL'auteur Nikos Paraskevopoulos
var regex = new RegExp(".*" + searchItem + ".*", "ig")
avant la boucle. Cependant meilleure approche est d'utiliserindexOf
au lieu de RegExp.merci pour la réponse. Nikos' indexOf() solution s'est avérée la méthode la plus simple à mettre en œuvre.
OriginalL'auteur Manoj Nama
Prendre un coup d'oeil à la Angular-UI-Bootstrap directive pour
typeahead
c'est exactement ce que vous voulez: http://angular-ui.github.io/bootstrap/#/typeaheadFWIW, angular-ui n'est pas un développement de framework comme jquery-ui que vous avez à 'aide'. C'est un kit de pièces que vous pouvez déployer en tant que de besoin, sans avoir besoin de modifier votre application.
OriginalL'auteur m.e.conroy