Javascript: qué evento utilizar para el cambio de selección múltiple

Question

Estoy usando YUI como marco de JavaScript, y puedo reaccionar con éxito cuando el usuario cambia el valor de los campos de entrada básicos, la reacción es enviar una consulta Ajax.

Sin embargo, no tengo tanta suerte con las listas desplegables de selección múltiple:

• escuchando " cambiar " enviaría mi consulta cada vez que el usuario agregue / elimine un elemento a su selección
• escuchando " desenfoque " requiere que el usuario haga clic en otro lugar para perder el foco y enviar la consulta (no muy utilizable), además de enviar la consulta si el usuario solo se desplaza en la lista sin cambiar nada (inútil, confuso).

¿Alguna idea (con YUI), que usaría un comportamiento inteligente? ¿O debería realmente escuchar los cambios e implementar un tiempo de espera (para esperar los cambios posteriores antes de enviar una consulta)?

Answer 1

Utilizo el mismo tipo de tiempo de espera que desea en los eventos clave, para detectar cuándo el usuario ha terminado de escribir, se puede utilizar el mismo enfoque para su problema:

// helper function
var timeout = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();

Uso:

// YUI 2
YAHOO.util.Event.addListener(oElement, "change", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}); 

// YUI 3
Y.on("click", function () {
  timeout(function () {
    // one second since the last selection change
  }, 1000);
}, oElement);

Básicamente, en esta función timeout , restablezco el temporizador si la función se llama antes del retraso especificado.

Answer 2

puede ejecutar un setTimeout después del evento onChange y realizar un seguimiento de una serie de cambios para determinar si se ha realizado un cambio desde que se activó el evento. si no se realizaron cambios dentro de ese tiempo, la consulta podría enviarse.

por ejemplo, algo como:

var changes = 0;

function myOnChangeHandler(e)
{
  changes++;
  var local_change = changes;

  setTimeout(function() { 
    if (local_change === changes) {
      sendRequest();
    }
  }, 500);
}