¿Cómo se puede vincular la autocompletación de jQuery UI con .on()?

Question

Esta pregunta fue respondida para el método live(), pero el método live() ha quedado obsoleto a partir de jQuery 1.7 y reemplazado por el método .on() y esta respuesta no funciona para on().

aquí es donde se fue respondida antes: Bind jQuery UI autocomplete using .live()

Alguien sabe cómo hacer la misma cosa con el()?

Si cambia la sintaxis a algo así como

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

de

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

En cierto modo se trabaja, sino que interactúa con los eventos internos de autocompletar de una manera extraña. Con live(), si usa el evento select y accede al event.target, le proporciona la identificación del elemento de entrada. Si usa on(), le da el id del menú desplegable "ui-active-menuitem". Algo como esto:

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

Pero - si se utiliza el evento "abierta", que le dará el id Busco - no sólo en el momento adecuado (lo necesito después de que se ha seleccionado). En este punto, estoy usando una solución de 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

Si entendí correctamente, su problema es muy similar al que vi en otro tema. Voy a adapto my answer a su caso, vamos a ver si se soluciona el 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. Usé focus en lugar de keydown porque necesito volver a activar el evento, y no sé cómo hacerlo con los eventos de la tecla/mouse.

actualización: También podría considerar el uso clone, si sus entradas adicionales tendrán la misma función de autocompletar que una 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); 
}); 

Véase el updated fiddle. También hay complementos de plantillas de jQuery que pueden hacer que esta solución sea más fácil (aunque todavía no la he usado, así que no puedo hablar por experiencia).

Answer 2

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 el():

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

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

La diferencia es con on(), el evento param en los eventos internos funciona de manera diferente, con diferentes valores. Con live(), el evento.objetivo.id en la función de selección contendrá la ID del elemento de entrada seleccionado. Pero con on(), event.target.id en seleccione contendrá la ID de la lista de elementos de autocompletar (ui-active-menuitem). Con on(), puede acceder al ID del elemento de entrada con event.target.id desde change y open funciones.