jQuery evento al seleccionar un elemento sugerido en un cuadro de texto?

Question

Me gustaría ejecutar una función sobre cada modificación de un control de cuadro de texto tan pronto como el usuario esté escribiendo. el evento .keyup() está bien para la mayoría de los casos.

Sin embargo, los navegadores (como Chrome o Firefox) pueden sugerir entradas de autocompletado para controles de cuadro de texto (probablemente porque se conoce @name o @id del control de entrada).

Desafortunadamente, no puedo despedir a ninguno de los siguientes eventos al "hacer clic en una entrada sugerida". (.keyup() se activa cuando ha seleccionado con el teclado)

$('input#email') 
    .click(function() { console.log('click'); }) 
    .keyup(function() { console.log('keyup'); }) 
    .keydown(function() { console.log('keydown'); }) 
    .change(function() { console.log('change'); }) 
    .focus(function() { console.log('focus'); }) 
    .blur(function() { console.log('blur'); }); 

Como medida de lo posible, me gustaría evitar el uso de una comprobación periódica setInterval().

¿Hay alguna manera de detectar este evento "seleccionar una sugerencia"?

Answer 1

unen propertychange evento:

$('input').bind('input propertychange', function() { 

    var input = this.value.trim(); 
    [...] 

}); 

Answer 2

La respuesta breve es no, no hay ningún evento para detectar una selección de sugerencias. Podría intentar observar los observadores de la mutación DOM, pero no estoy seguro si estos cubren los cambios de los atributos, y de todos modos hay poco apoyo para esta API.

Así que si realmente necesita manejar este caso, entonces creo que setInterval es su única opción.

Editar: 3 años después puede usar propertychange con jQuery como en la nueva respuesta aceptada (que supongo que usa observadores de mutación debajo del capó).

Answer 3

El evento de cambio parece funciona bien, pero ¿que requieren de clic de distancia

Answer 4

solución alternativa desactivar la función de autocompletar y manejar otros eventos como keyup, keydown etc

<input type="text" name="foo" autocomplete="off" />