Javascript - Qual evento ao uso de mudança multiselect

Question

Eu estou usando YUI como framework javascript, e com êxito pode reagir quando o usuário altera o valor de campos de entrada básicos, sendo a reacção à enviada uma consulta Ajax.

No entanto, eu não tenho tanta sorte com listas suspensas multiseleções:

• ouvir "mudança" iria enviar minha consulta cada vez que o usuário adiciona / remove um item para sua seleção
• ouvindo "blur" exige que o usuário clique em outro lugar, a fim de perder o foco e enviar a consulta (não muito utilizável), além de que iria enviar a consulta se o usuário só rola na lista sem mudar nada (inútil, confundindo).

Qualquer ideia (com YUI), que usaria um comportamento inteligente? Ou devo realmente ouvir a mudança e implementar um tempo limite (para esperar por alterações subsequentes antes de enviar uma consulta)?

Answer 1

Eu uso o mesmo tipo de tempo limite que você quer em eventos-chave, para detectar quando o usuário tiver terminado de digitar, a mesma abordagem pode ser usada em seu 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);

Basicamente nesta função timeout, eu reiniciar o temporizador, se a função é chamada antes o atraso especificado.

Answer 2

você poderia executar um setTimeout após o evento e acompanhar onChange de uma série de mudanças para determinar se ou não uma mudança havia sido feita desde que o evento foi disparado. Se nenhuma alteração foi feita dentro desse prazo, a consulta pode ser enviada.

por exemplo, algo como:.

var changes = 0;

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

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