Блог

предыстория

У меня есть несколько выпадающих списков на странице. Если вы измените первый, остальные выпадающие списки обновляются в соответствии с тем, что вы выбрали.

В нашем случае мы имеем дело с данными фонда. Итак, первый выпадающий список — «Все типы фондов». Вы выбираете «Хедж-фонды», и следующий выпадающий список фильтруется параметрами, которые применимы только к хедж-фондам.

Теперь клиент просит меня добавить текстовое поле в микс, которое, когда пользователь начнет печатать, повлияет на эти результаты.

Итак, если они введут «USD», второй выпадающий список будет содержать только варианты, в названии которых указаны средства с «USD».

проблема

Конкретная проблема, с которой я сталкиваюсь, заключается в коде, который я использую:

 $('#Search').keypress(function () {
    // trigger the updating process
});
  

Это запускает поиск при каждом нажатии клавиши. Итак, когда я набираю «USD», я получаю сразу 3 запроса — один для «U», один для «US» и один для «USD».

Я попытался установить тайм-аут с помощью этого:

 $('#Search').keypress(function () { 
    // I figure 2 seconds is enough to type something meaningful
    setTimeout(getFilteredResultCount(), 2000);
});
  

но все, что нужно, это подождать 2 секунды, прежде чем делать то, что я описал.

Я уверен, что эта проблема была решена раньше. Может кто-нибудь подсказать, как решить эту проблему?

Способ, которым я делал это раньше, — установить тайм-аут, но очищать существующий тайм-аут при каждом нажатии новой клавиши. Таким образом, вы должны получать запрос, отправляемый только тогда, когда пользователь перестал печатать.

 var timeoutId = 0;
$('#Search').keypress(function () { 
    clearTimeout(timeoutId); // doesn't matter if it's 0
    timeoutId = setTimeout(getFilteredResultCount, 500);
    // Note: when passing a function to setTimeout, just pass the function name.
    // If you call the function, like: getFilteredResultCount(), it will execute immediately.
});
  

(Я бы выбрал тайм-аут около 500 мс.)