jQuery UI Autocomplete Plusieurs Valeurs dans la zone de texte

J'ai besoin d'une simple saisie semi-automatique de la fonctionnalité de recherche, mais aussi en permettant aux utilisateurs de taper plus d'une valeur. Je suis à l'aide de jQuery UI autocomplete widget (http://jqueryui.com/autocomplete/) et pour l'instant j'ai mis la source pour rechercher seulement la première lettre dans les suggestions. Ce que je voudrais ajouter maintenant est la possibilité pour les utilisateurs à la recherche de plusieurs éléments de la même zone de texte. (c'est à dire après une virgule suggestions sont affichées de nouveau)

J'ai essayé de faire une recherche sur la façon dont cela pourrait être fait. La seule chose que j'ai réussi à trouver est une option qui pourrait être ajouté multiple: true (http://forum.jquery.com/topic/multiple-values-with-autocomplete). C'est qu'il n'est même pas répertorié dans la documentation plus donc je ne sais pas si l'option a changé ou n'existe plus.

C'est mon code:

    var items = [ 'France', 'Italy', 'Malta', 'England', 
        'Australia', 'Spain', 'Scotland' ];

    $(document).ready(function () {
        $('#search').autocomplete({
            source: function (req, responseFn) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp('^' + re, 'i');
                var a = $.grep(items, function (item, index) {
                    return matcher.test(item);
                });
                responseFn(a);
            }
        });
    });

Ce que j'ai essayé:

    var items = [ 'France', 'Italy', 'Malta', 'England', 
        'Australia', 'Spain', 'Scotland' ];

    $(document).ready(function () {
        $('#search').autocomplete({
            source: function (req, responseFn) {
                var re = $.ui.autocomplete.escapeRegex(req.term);
                var matcher = new RegExp('^' + re, 'i');
                var a = $.grep(items, function (item, index) {
                    return matcher.test(item);
                });
                responseFn(a);
            },
            multiple: true
        });
    });
InformationsquelleAutor Daniel Grima | 2013-10-05
  1. 12

    Essayez ceci:

      function split( val ) {
    return val.split( /,\s*/ );
  }

  function extractLast( term ) {
     return split( term ).pop();
   }

   $( "#search" )
        .autocomplete({
             minLength: 0,
             source: function( request, response ) {
                 response( $.ui.autocomplete.filter(
                     items, extractLast( request.term ) ) );
             },
             focus: function() {
                 return false;
             },
            select: function( event, ui ) {
                var terms = split( this.value );
                terms.pop();
                terms.push( ui.item.value );
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            }
        });

    VOIR DÉMO

    • Génial qui fonctionne! 🙂 Seul problème que j'ai c'est que je n'arrive pas à le faire fonctionner avec la RegEx que j'ai dans le code ci-dessus. Maintenant, c'est ignorer les RegEx
    • si elle est correcte, alors u accepter cette réponse
    • C'est correct, mais il ne fonctionne pas avec la RegEx que j'ai. J'aimerais des suggestions à être mis en correspondance avec la première lettre de la recherche n'est pas de "lettre par lettre". C'est le seul problème que j'ai. Si vous regardez le code que j'ai posté j'ai une RegEx pour traiter ce cas. Même si votre code fonctionne, lorsque j'ajoute le code RegEx j'ai des suggestions ci-dessus sont affichés uniquement pour le premier mot.
    • Est-il un moyen de récupérer les données depuis la base de données au lieu d'utiliser la liste prédéfinie. Merci à l'avance.
    InformationsquelleAutor Nitish Kumar
  2. 3

    Pour résoudre le problème de plusieurs chaînes de caractères dans la même zone de texte ET comprennent une regex pour ne montrer que des suggestions correspondant au début de la chaîne, je n'ai suivantes:

        $('#search').autocomplete({
minLength: 1,
source: function (request, response) {
var term = request.term;
//substring of new string (only when a comma is in string)
if (term.indexOf(', ') > 0) {
var index = term.lastIndexOf(', ');
term = term.substring(index + 2);
}
//regex to match string entered with start of suggestion strings
var re = $.ui.autocomplete.escapeRegex(term);
var matcher = new RegExp('^' + re, 'i');
var regex_validated_array = $.grep(items, function (item, index) {
return matcher.test(item);
});
//pass array `regex_validated_array ` to the response and 
//`extractLast()` which takes care of the comma separation
response($.ui.autocomplete.filter(regex_validated_array, 
extractLast(term)));
},
focus: function () {
return false;
},
select: function (event, ui) {
var terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
terms.push('');
this.value = terms.join(', ');
return false;
}
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
    InformationsquelleAutor Daniel Grima