Je ne peux pas obtenir que $ (cela) travaille dans l’auto-complétion jQueryUI

J’essaie de créer un script générique autocomplete à l’aide de jQueryUI. La saisie semi-automatique devrait fonctionner pour chaque:

  ... 

Maintenant, j’essaie d’accéder à ‘foo’ ou ‘bar’ dans la fonction source en utilisant $ (this), mais quand je suis en alerte, je suis toujours ‘non défini’.

 $('input.autocomplete').autocomplete({ source: function(req, add){ var id = $(this).attr('id'); alert(id); } }); 

Qu’est-ce que je fais mal?

Configurez la saisie semi-automatique séparément pour chaque élément de votre sélection, en utilisant une fermeture pour contenir une référence à l’élément en question. Quelque chose comme ce qui suit:

 $('input.autocomplete').each(function(i, el) { el = $(el); el.autocomplete({ source: function(req, add) { var id = el.attr('id'); alert(id); } }); }); 

Alternative (éditer)

Je ne vois pas pourquoi il y a une telle résistance à utiliser each() : cela fonctionne, le code est très clair et lisible, et il ne pose aucun problème d’efficacité; mais si vous êtes déterminé à éviter each() , voici une alternative …

* VEUILLEZ NOTER: l’approche suivante repose (un peu) sur les éléments internes de jQuery Autocomplete, donc je recommanderais la première option … mais le choix vous appartient.

 $('input.autocomplete').autocomplete({ source: function(req, add) { var id = this.element.attr('id'); alert(id); } }); }); 

Cela fonctionnera, du moins jusqu’à / à moins qu’ils ne changent la façon dont la fonction source() est appelée depuis le plugin autocomplete .

Donc, vous avez deux options … quelque chose pour tout le monde.

Pour accéder à cet élément d’entrée, vous devriez pouvoir effectuer les opérations suivantes:

 $(this.element).val(); 

Bien sûr, cela ne fait que gagner de la valeur. Vous pouvez accéder aux autres atsortingbuts comme ceci:

 $(this.element).attr('value'); // just another way to get the value $(this.element).attr('id'); 

De plus, supposons que vous souhaitiez accéder à cet élément dans l’ événement select , vous pouvez le faire comme suit:

 $(event.target).attr('value'); $(event.target).attr('id'); 

$(this) viendra de votre fonction nouvellement créée et ne fonctionnera donc pas. Déplacez votre déclaration d’ id au-dessus de la source et cela devrait fonctionner.

Marwelin a raison. ‘this’ fera référence à la fonction nouvellement créée dans laquelle vous êtes nested. Ceci est facilement réparable en créant le var id dehors de la fonction et en l’utilisant dans la fonction.