Как сделать ajax поиск с keyup задержкой для уменьшения нагрузки?

Question

[madc0de]

Добрый день!
Как изменить обычный код аякс поиска

$("#search").keyup(function (a) {
	LiveSearch(a, this.value)
})

чтобы искало только когда человек закончил печатать. А не при каждом нажатии клавиши.
Например если я введу быстро букву А и удалю, то он сделает 2 запроса к бд

Хотелось бы как-то более профессионально. Чтобы пока печатает аякс запросы не отправлялись

Answer 1

[ThunderCat]

простой вариант:

let timer;
$("#search").keyup(function (a) {
if(this.value.length < 3) return true; // не искать если меньше 2 букв
let keyPause = 200; // задержка в нажатии кнопок
let that = this; 
clearTimeout(timer); //сбрасываем таймер если задержка меньше заданной
timer = setTimeout(LiveSearch(a, that.value), keyPause); // запускаем поиск спаузой
})

Answer 2

[tuwkan]

Debounce ?

Comments

[madc0de]

$('#search_term').on('keyup', _.debounce(function (e) {
   $.ajax({
        type: "GET",
        url: "quicksearch.php",
        data: { search_term:$('#search_term').val()},
        success: function(msg){$('#quick_search_results').html(msg).slideDown();}
   });
}, 300));

Нашел такой пример, основываясь на вашем опыте есть что дополнить?

Answer 3

[Михаил]

Вместо keyup привязаться к другому событию, например change или input. Но change сработает только после потери полем фокуса. Также можно заставить поиск срабатывать по нажатию кнопки, а не сразу