No se puede obtener $ (esto) trabajando en el autocompletado de jQueryUI

Question

Estoy tratando de crear un script de autocompletar genérico usando jQueryUI. El autocompletar debe funcionar para todos:

<input type='text' class='autocomplete' id='foo'/> 
<input type='text' class='autocomplete' id='bar'/> 
... 

Ahora estoy tratando de acceder a 'foo' o 'bar' en la función de fuente utilizando $ (este), pero cuando alerta siempre me 'indefinido'.

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

¿Qué estoy haciendo mal?

Answer 1

Configure la autocompletar por separado para cada elemento de su selección, utilizando un cierre para mantener una referencia al elemento correspondiente. Algo así como lo siguiente:

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

---

Alternativa (editar)

no veo por qué hay tanta resistencia a usar each(): funciona, el código es muy clara y fácil de leer, y no introduce problemas con la eficiencia; pero si está decidido a evitar each(), aquí hay una alternativa ...

* TENGA EN CUENTA que el siguiente enfoque se basa (un poco) en el funcionamiento interno de jQuery Autocomplete, así que recomendaría la primera opción. .pero la elección es tuya

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

que funcione, al menos hasta que/a menos que cambien la forma en que la función source() se llama desde dentro de la autocomplete plugin.

Entonces, usted tiene dos opciones ... algo para todos.

Answer 2

$(this) vendrá de su función recién creada y, por lo tanto, no funcionará. Mueva su declaración id arriba source y debería funcionar.

Answer 3

Marwelin es correcto. 'this' hará referencia a la función recién creada en la que está anidado. Esto es fácilmente reparable creando el var id fuera de la función y utilizándolo dentro de la función.

Answer 4

para acceder a ese elemento de entrada que debe ser capaz de hacer lo siguiente:

$(this.element).val(); 

Por supuesto, que sólo se pone el valor. Puede acceder a los otros atributos de este modo:

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

Además, suponga que desea tener acceso a ese elemento en el select event, se puede hacer que de este modo:

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