Comment liez-vous l’auto-complétion de l’interface utilisateur jQuery à l’aide de .on ()?

Cette question a reçu une réponse pour la méthode live (), mais la méthode live () est obsolète à partir de jQuery 1.7 et remplacée par la méthode .on (). Cette réponse ne fonctionne pas pour on ().

Voici où il a été répondu auparavant: Lier l’auto-complétion de l’interface utilisateur jQuery à l’aide de .live ()

Quelqu’un sait comment faire la même chose avec on ()?

Si vous changez la syntaxe en quelque chose comme

$(document).on("keydown.autocomplete",[selector],function(){...});

 $([selector]).live("keydown.autocomplete",function(){...});

Cela fonctionne, mais cela interagit de manière étrange avec les événements internes. Avec live (), si vous utilisez l’événement select et accédez à event.target, cela vous donne l’identifiant de l’élément input. Si vous utilisez on (), cela vous donne l’identifiant du menu déroulant “ui-active-menuitem”. Quelque chose comme ça:

 $( ".selector" ).autocomplete({ select: function(event, ui) { console.log(event.target.id); } });

Mais si vous utilisez l’événement “open”, il vous donnera l’identifiant que je cherche – mais pas au bon moment (j’en ai besoin une fois qu’il est sélectionné). À ce stade, j’utilise une solution de contournement consistant à récupérer l’ID de l’élément d’entrée dans la fonction d’événement ouverte, à le stocker dans un champ masqué, puis à y accéder dans la méthode de sélection où j’en ai besoin.

Si j’ai bien compris, votre problème ressemble beaucoup à celui que j’ai vu dans un autre sujet. Je vais adapter ma réponse à votre cas, voyons si cela résout votre problème:

 $(document).on("focus",[selector],function(e) { if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet: $(this).autocomplete({ // call it source:['abc','ade','afg'] // passing some parameters }); } });

Exemple de travail chez jsFiddle . J’ai utilisé focus au lieu de keydown car j’ai besoin de réactiver l’événement et je ne sais pas comment le faire avec les événements touche / souris.

Mise à jour : vous pouvez également envisager d’utiliser le clone , si vos entrées supplémentaires auront la même saisie semi-automatique qu’une entrée existante:

 var count = 0; $(cloneButton).click(function() { var newid = "cloned_" + (count++); // Generates a unique id var clone = $(source) // the input with autocomplete your want to clone .clone() .attr("id",newid) // Must give a new id with clone .val("") // Clear the value (optional) .appendTo(target); });

Voir le violon mis à jour . Il existe également des plugins de modèles jQuery qui pourraient rendre cette solution plus facile (bien que je n’en ai pas encore utilisé moi-même, je ne peux donc pas parler par expérience).

Cela semble juste être une particularité de l’interaction entre .on () et autocomplete. Si vous voulez faire ceci:

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

Cela fonctionne avec sur ():

 $(function(){ $(document).on("keydown.autocomplete",".search",function(e){ $(this).autocomplete({ source : 'url.php' }); }); });

Vous pouvez accéder à event.target.id de l’élément sur lequel la saisie semi-automatique a été appelée avec le paramètre de la fonction de rappel on () ( e dans le code ci-dessus).

La différence est avec on (), le paramètre event dans les événements internes fonctionne différemment, contenant des valeurs différentes. Avec live (), event.target.id dans la fonction de sélection conservera l’ID de l’élément d’entrée sélectionné. Mais avec on (), event.target.id in select conservera l’ID de la liste des éléments à complétion automatique ( ui-active-menuitem ). Avec on (), vous pouvez accéder à l’ID de l’élément d’entrée avec event.target.id à partir des fonctions change et open .