web-dev-qa-db-fra.com

JQuery UI Autocomplete Utilisez StartSwith

J'utilise l'UI JQuery UI avec une source de données locale (source: myArray). Je veux que l'autocomplete propose uniquement les résultats qui commencez par la chaîne saisie au lieu de la défaillance de la valeur par défaut Cas-insensible contient Recherche. Existe-t-il une solution simple pour cela ou dois-je fournir mon rappel sur la recherche/source personnalisée?

jqueryjquery-uiautocomplete
32
Bart

Actuellement, je l'ai fait de cette façon, pas sûr s'il y a 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) sur la quantité d'éléments à montrer.

13
Bart

Regarde ça:

Match Match Start Word:

http://blog.miroslavpopovic.com/jQueryui-autocomplete-filter-Words-Starting-with-term

Il remplace la méthode de filtre automatique. J'utilise cela et ça marche bien.

// Overrides the default autocomplete filter function to search only from the beginning of the string
$.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);
    });
};

Match Word:

Match StartSwith de n'importe quel mot de la chaîne.

par exemple. "LHR London" est assorti par "London"

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

\ B affirment la position à une limite de mot (^\w |\w $ |\w\w |\w\w)

28
Bumptious Q Bangwhistle

vous pouvez utiliser la même manière dans Exemples Jquery UI Autocomplete

<script>
$("#autocompleteInputField").autocomplete({
  source: function(request, response) {
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
          response($.grep(myArray, function(item){
              return matcher.test(item);
          }) );
      }
});
</script>

[~ # ~] ou [~ # ~ ~] Une autre solution avec l'utilisation $.map méthode non $.grep

<script>
$("#autocompleteInputField").autocomplete({
  source: function(request, response) {
          var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
          response($.map(myArray, function(item) {
               if (matcher.test(item)) {
                   return (item)
               }
          }));
      }
});
</script>
3
ahmed hamdy

Je suis allé dans le code Jqueryui et je l'ai commuté là-bas.

Si vous regardez dans la section complète automatique, vous verrez la ligne suivante:

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

Modifiez-le sur ce qui suit (méfiez-vous, il s'agit d'un changement global):

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

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 la REGEXP dans le deuxième exemple, ce qui entraîne l'insensibilité de l'analyse dans la mise en œuvre par défaut.

étui insensible:

            $('#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);
                }
            });
2
djs
source: function( request, response ) {
                var t = jQuery.grep(t, function(a){
                        var patt = new RegExp("^" + request.term, "i");
                        return (a.match(patt));
                    });
                response(t);
            },
1
Jamie R Rytlewski