Javascript - Qual evento ao uso de mudança multiselect
-
08-07-2019 - |
Pergunta
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)?
Solução
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.
Outras dicas
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);
}