web-dev-qa-db-fra.com

Lier l'auto-complétion de l'interface utilisateur jQuery à l'aide de .live ()

J'ai cherché partout, mais je n'arrive pas à trouver d'aide ...

J'ai des zones de texte qui sont créées dynamiquement via JS, je dois donc lier toutes leurs classes à une saisie semi-automatique. Par conséquent, je dois utiliser la nouvelle option .live ().

Par exemple, pour lier tous les éléments avec une classe de .foo maintenant et à venir:

$('.foo').live('click', function(){
  alert('clicked');
});

Il prend (et se comporte) la même chose que .bind (). Cependant, je veux lier un autocomplete ...

Cela ne marche pas:

$('.foo').live('autocomplete', function(event, ui){
  source: 'url.php' // (surpressed other arguments)
});

Comment puis-je utiliser .live () pour lier la saisie semi-automatique?

METTRE À JOUR

Je l'ai compris avec Framer:

$(function(){
  $('.search').live('keyup.autocomplete', function(){
    $(this).autocomplete({
      source : 'url.php'
    });
  });
});
bindingautocompletejquery
66
sethvargo

Si vous utilisez le jquery.ui.autocomplete.js essayez plutôt ceci

.bind("keydown.autocomplete") or .live("keydown.autocomplete")

sinon, utilisez le jquery.ui.autocomplete.js et voyez si ça va marcher

Si cela ne s'applique pas, je ne sais pas comment vous aider, mon frère.

18
Famver Tags

la fonction autocomplete de jQuery UI ajoute automatiquement la classe "ui-autocomplete-input" à l'élément. Je recommanderais de relier en direct l'élément actif sans la classe "ui-autocomplete-input" Afin d'empêcher la reliure de chaque événement de touche au sein de cet élément.

$(".foo:not(.ui-autocomplete-input)").live("focus", function (event) {
    $(this).autocomplete(options);
});

Modifier

Ma réponse est maintenant obsolète depuis jQuery 1.7, voir le commentaire de Nathan Strutz à utiliser avec la nouvelle syntaxe .on().

70
Dan

Juste pour ajouter, vous pouvez utiliser le plugin .livequery :

$('.foo').livequery(function() {

    // This will fire for each matched element.
    // It will also fire for any new elements added to the DOM.
    $(this).autocomplete(options);
});
9
karim79

Pour que l'auto-complétion fonctionne lorsqu'elle est chargée dynamiquement pour l'événement on() utilisé dans jQuery> 1.7, utilisez la syntaxe fournie par Nathan Strutz dans son commentaire:

$(document).on('focus', '.my-field:not(.ui-autocomplete-input)', function (e) {
    $(this).autocomplete(options)
});

où .my-field est un sélecteur pour votre élément d'entrée autocomplete.

8
Ollie P

.live () ne fonctionne pas avec focus . aussi keyup.autocomplete n’a aucun sens . Au lieu de cela, j’ai essayé et je travaille est ce

 $(document).ready(function(){
$('.search').live('keyup' , function()
  { 
    $(this).autocomplete({ source : 'url.php' }); 
  });
})

Cela fonctionne parfaitement bien.

5
Rehan Anis

Tu ne peux pas. .live () ne prend en charge que les événements JavaScript réels, pas les événements personnalisés. C'est une limitation fondamentale du fonctionnement de .live ().

3
ysth

Après avoir lu et testé les réponses de tous les autres, je l’ai mis à jour pour la version actuelle de JQuery et y ai apporté quelques modifications.

Le problème lié à l'utilisation de keydown en tant qu'événement appelant .autocomplete() est qu'il ne parvient pas à la saisie semi-automatique pour la première lettre saisie. Utiliser le focus est le meilleur choix.

Une autre chose que j'ai remarquée est que toutes les solutions données entraînent l'appel de .autocomplete() à plusieurs reprises. Si vous ajoutez dynamiquement un élément à la page qui ne sera plus supprimé, l'événement ne doit être déclenché qu'une seule fois. Même si l'élément doit être supprimé et ajouté à nouveau, l'événement doit être supprimé, puis rajouté chaque fois que l'élément est supprimé ou ajouté, de sorte que vous concentrer à nouveau sur le champ n'appelle pas inutilement .autocomplete() à chaque fois.

Mon code final est le suivant:

$(document).on('focus.autocomplete', '#myAutocomplete', function(e){
    $(this).autocomplete(autocompleteOptions);
    $(document).off('focus.autocomplete', '#myAutocomplete');
});
2
J.Money

Vous pouvez essayer d'utiliser ceci:

$('.foo').live('focus.autocomplete', function() {
    $(this).autocomplete({...});
});
2
arthurmarcels

Cela fonctionne pour moi:

$(function() 
{
  $('.item_product').live('focus.autocomplete', function()
  { 

    $(this).autocomplete("/source.php/", {
        width: 550,
        matchContains: true,
        mustMatch: false,
        selectFirst: false,
    }); 

  });
});
1
Nicklas

autocomplete n'est pas un événement mais une fonction qui active la fonctionnalité de complétion automatique pour une zone de texte.

Donc, si vous pouvez modifier le js qui crée les zones de texte de manière dynamique pour envelopper l’élément textbox en tant qu’objet jQuery et appeler autocomplete sur cet objet.

1
Chandu

Je viens de remarquer que vous avez modifié votre message avec cette réponse. C'était évident pour moi alors je le poste ci-dessous pour les autres. Je vous remercie.

$(function() 
{
  $('.search').live('keyup.autocomplete', function()
  { 
    $(this).autocomplete({ source : 'url.php' }); 
  });
});
1
Andi

Vous pouvez simplement mettre l'événement en direct d'entrée semi-automatique à l'intérieur, comme ceci:

$('#input-element').live('input', function(){
  
$("#input-element").autocomplete(options);

});

0
Josh