Javascript - 用于多重选择更改的事件 [英] Javascript - Which event to use for multiselect change

问题描述

我使用YUI作为JavaScript框架，并且可以在用户更改基本输入字段的值时成功地作出反应，反应是发送Ajax查询。

但是，我不太喜欢多选下拉列表：

• 听更改会在每次用户添加时发送查询/删除一个项目到他的选择


• 听模糊要求用户点击其他地方，以放松焦点并发送查询（不是非常有用），加上它会发送查询用户是否只是滚动列表而不改变任何东西（无用，混乱）。

任何想法（带有YUI）使用聪明的行为？
或者我应该真的听取更改并实现超时（在发送查询之前等待后续更改）？

解决方案

p>我使用与关键事件相同的超时时间，以检测用户何时完成打字，同样的方法可以用于您的问题：

  // helper function 
 var timeout =（function（）{
 var timer = 0; 
 return function（callback，ms）{
 clearTimeout （timer）; 
 timer = setTimeout（callback，ms）; 
}; 
}）（）; 
  

用法：

 code> // YUI 2 
 YAHOO.util.Event.addListener（oElement，change，function（）{
 timeout（function（）{
 // one second since最后一个选择更改
}，1000）; 
}）; 
 
 // YUI 3 
 Y.on（click，function（）{
 timeout（function（）{
 //自上次选择以来的一秒钟更改
}，1000）; 
}，oElement）; 
  

基本上在这个超时函数中，我重置如果函数在指定的延迟之前调用，那么定时器

I'm using YUI as javascript framework, and can successfully react when the user changes the value of basic input fields, the reaction being to sent an Ajax query.

However, I'm not so lucky with multiselect dropdown lists:

• listening to "change" would send my query each time the user adds/removes an item to his selection
• listening to "blur" requires the user to click elsewhere in order to loose the focus and send the query (not very usable), plus it would send the query if the user only scrolls on the list without changing anything (useless, confusing).

Any idea (with YUI), that would use a clever behavior? Or should I really listen to change and implement a timeout (to wait for subsequent changes before sending a query)?

解决方案

I use the same kind of timeout you want on key events, to detect when the user have finished typing, the same approach can be used on your problem:

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

Usage:

// 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);

Basically in this timeout function, I reset the timer if the function is called before the specified delay.

这篇关于Javascript - 用于多重选择更改的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！