template - panel jquery ui

No se puede obtener $(esto) trabajando en autocompletar jQueryUI

Question

Intento crear un script de autocompletar genérico usando jQueryUI. La autocompleta debería 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 fuente usando $ (esto), pero cuando estoy alertando siempre me sale ''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, usando un cierre para mantener una referencia al elemento relevante. Algo 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é existe tal resistencia al uso de each() : funciona, el código es muy claro y legible, y no presenta problemas con la eficiencia; pero si estás decidido a evitar each() , aquí hay una alternativa ...

* TENGA EN CUENTA que el siguiente enfoque se basa (un poco) en las partes internas de jQuery Autocomplete, por lo que recomendaría la primera opción ... pero la elección es suya.

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

Eso funcionará, al menos hasta / a menos que cambien la forma en que se llama a la función source() dentro del complemento autocomplete .

Entonces, tienes dos opciones ... algo para todos.

Answer 2

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

Answer 3

Para acceder a ese elemento de entrada, debe poder hacer lo siguiente:

$(this.element).val();

Por supuesto, eso solo tiene el valor. Puede acceder a los otros atributos de la siguiente manera:

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

Además, supongamos que desea acceder a ese elemento en el evento select , puede hacerlo así:

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

Answer 4

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