ejemplo - jquery autocomplete select event

¿Cómo se vincula el autocompletado de jQuery UI con.on()?

Question

Esta pregunta fue respondida para el método live (), pero el método live () ha quedado en desuso en jQuery 1.7 y se ha reemplazado con el método .on () y esta respuesta no funciona para on ().

Aquí es donde se respondió antes: Vincular jQuery UI autocompletar utilizando .live ()

¿Alguien sabe cómo hacer lo mismo con on ()?

Si cambias la sintaxis a algo como

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

desde

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

Funciona, pero interactúa con los eventos autocompletados internos de una manera extraña. Con live (), si usas el evento select y accedes al event.target, te da el id del elemento de entrada. Si lo usas en (), te da la identificación del menú desplegable "ui-active-menuitem". Algo como esto:

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

Pero, si usa el evento "abierto", le dará la identificación que estoy buscando, pero no en el momento adecuado (lo necesito después de que se seleccione). En este punto, estoy usando una solución alternativa para agarrar el ID del elemento de entrada en la función de evento abierto, almacenarlo en un campo oculto y luego acceder a él en el método de selección donde lo necesito.

Answer 1

Esto parece ser solo una peculiaridad de la interacción entre .on () y autocompletar. Si quieres hacer esto:

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

Esto funciona con en ():

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

Puede acceder al evento.target.id del elemento al que se llamó al autocompletar con el parámetro de la función de devolución de llamada on () ( e en el código anterior).

La diferencia está en on (), el parámetro de evento en los eventos internos funciona de manera diferente, manteniendo diferentes valores. Con live (), event.target.id en la función de selección mantendrá el ID del elemento de entrada seleccionado. Pero con on (), event.target.id en select mantendrá el ID de la lista de elementos autocompletados ( ui-active-menuitem ). Con on (), puede acceder al ID del elemento de entrada con event.target.id desde las funciones de cambio y apertura .

Answer 2

Si entendí correctamente, su problema se parece mucho a uno que vi en otro tema. Adaptaré mi respuesta a tu caso, veamos si resuelve tu problema:

$(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
        });
    }
});

Ejemplo de trabajo en jsFiddle . Utilicé el focus lugar de la keydown de keydown porque necesito volver a activar el evento, y no sé cómo hacerlo con los eventos de tecla / mouse.

Actualización : también podría considerar el uso de clone , si sus entradas adicionales tendrán el mismo autocompletado que uno existente:

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);
});

Ver el violín actualizado . También hay complementos de la plantilla jQuery que podrían facilitar esta solución (aunque todavía no he usado una, por lo que no puedo hablar por experiencia).