Utilisation de la saisie semi-automatique de l’interface utilisateur jQuery

Regarde ça:

Match mot de départ:

http://blog.miroslavpopovic.com/jqueryui-autocomplete-filter-words-starting-with-term

Il substitue la méthode de filtre à complétion automatique. Je l’utilise et ça marche bien.

 // Overrides the default autocomplete filter function to search only from the beginning of the ssortingng $.ui.autocomplete.filter = function (array, term) { var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i"); return $.grep(array, function (value) { return matcher.test(value.label || value.value || value); }); }; 

Mot correspondant:

La correspondance commence avec n’importe quel mot de la chaîne.

Par exemple, “LHR London” est comparé à “London”

 var matcher = new RegExp("\\b" + $.ui.autocomplete.escapeRegex(term), "i"); 

\ b affirmer une position à la limite d’un mot (^ \ w | \ w $ | \ W \ w | \ w \ W)

Actuellement, je l’ai fait de cette façon, je ne sais pas s’il existe une meilleure solution:

 source: function(request, response) { var filteredArray = $.map(orignalArray, function(item) { if( item.value.startsWith(request.term)){ return item; } else{ return null; } }); response(filteredArray); }, 

Cette approche a également permis d’imposer une limite (par exemple 10 éléments) à la quantité d’articles à afficher.

Je suis entré dans le code Jqueryui et l’ai basculé là.

Si vous regardez dans la section de saisie automatique, vous verrez la ligne suivante:

 filter:function(a,b){var g=new RegExp(d.ui.autocomplete.escapeRegex(b),"i") 

Modifiez-le comme suit (attention, ceci est un changement global):

 filter:function(a,b){var g=new RegExp("^" + d.ui.autocomplete.escapeRegex(b),"i") 

Voici une manière légèrement différente de faire une recherche sensible à la casse. Notez le manque de “i” dans la création de l’expression rationnelle dans le deuxième exemple, ce qui explique l’absence de sensibilité à la casse dans l’implémentation par défaut.

insensible à la casse:

  $('#elem').autocomplete({ source: array }); 

sensible aux majuscules et minuscules:

  $('#elem').autocomplete({ source: function(request, response) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term, "")); var data = $.grep( array, function(value) { return matcher.test( value.label || value.value || value ); }); response(data); } }); 

vous pouvez utiliser Same way dans les exemples de saisie semi-automatique de Jquery UI

OU une autre façon d’utiliser la méthode $.map et non pas $.grep

 source: function( request, response ) { var t = jQuery.grep(t, function(a){ var patt = new RegExp("^" + request.term, "i"); return (a.match(patt)); }); response(t); },