Javascript - какое событие использовать для изменения множественного выбора - PullRequest
Новая
       13

Javascript - какое событие использовать для изменения множественного выбора

1 голос
/ 29 ноября 2009

Я использую YUI в качестве фреймворка javascript и могу успешно реагировать, когда пользователь меняет значение основных полей ввода, а реакция на отправку Ajax-запроса.

Однако мне не так повезло с выпадающими списками с несколькими выборками:

  • прослушивание «изменения» будет отправлять мой запрос каждый раз, когда пользователь добавляет / удаляет элемент в своем выборе
  • прослушивание «размытия» требует от пользователя нажатия в другом месте, чтобы потерять фокус и отправить запрос (не очень полезный), плюс он отправит запрос, если пользователь только прокручивает список без изменения чего-либо (бесполезно запутанный).

Любая идея (с YUI), которая будет использовать умное поведение? Или мне действительно нужно послушать изменения и реализовать таймаут (чтобы дождаться последующих изменений перед отправкой запроса)?

Ответы [ 2 ]

4 голосов
/ 30 ноября 2009

Я использую тот же тип тайм-аута, который вы хотите для ключевых событий, чтобы определить, когда пользователь закончил печатать, такой же подход может быть использован для вашей проблемы: 

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

Использование: 

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

В основном в этой функции timeout я сбрасываю таймер, если функция вызывается до указанной задержки.

1 голос
/ 30 ноября 2009

вы можете запустить setTimeout после события onChange и отслеживать ряд изменений, чтобы определить, было ли внесено изменение с момента запуска события. если за это время не было внесено никаких изменений, запрос может быть отправлен.

например, что-то вроде: 

var changes = 0;

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

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