Оптимизированный поиск с помощью Ajax и нажатия клавиши
У меня есть следующий код, который я хочу использовать для поиска базы данных, поскольку пользователь вводит в текстовое поле. Код ниже хорошо работает, но кажется немного неэффективным, как будто пользователь вводит действительно быстро. Я потенциально делаю намного больше поисков, чем необходимый. Таким образом, если пользователь вводит в "парусном спорте", я ищу на "парусе", "saili", "sailin", и "приплываю".
Я хотел видеть, был ли способ обнаружить какое-либо конкретное время между нажатиями клавиш поэтому, только ищут, если пользователь прекращает вводить для 500 миллисекунд или чего-то вроде этого.
Существует ли лучшая практика для чего-то вроде этого?
$('#searchString').keypress(function(e) {
if (e.keyCode == 13) {
var url = '/Tracker/Search/' + $("#searchString").val();
$.get(url, function(data) {
$('div#results').html(data);
$('#results').show();
});
}
else {
var existingString = $("#searchString").val();
if (existingString.length > 2) {
var url = '/Tracker/Search/' + existingString;
$.get(url, function(data) {
$('div#results').html(data);
$('#results').show();
});
}
}
3 ответа
Вы можете сделать что-то вроде этого:
$('#searchString').keyup(function(e) {
clearTimeout($.data(this, 'timer'));
if (e.keyCode == 13)
search(true);
else
$(this).data('timer', setTimeout(search, 500));
});
function search(force) {
var existingString = $("#searchString").val();
if (!force && existingString.length < 3) return; //wasn't enter, not > 2 char
$.get('/Tracker/Search/' + existingString, function(data) {
$('div#results').html(data);
$('#results').show();
});
}
Это выполняет поиск (при клавиатурном нажатии , лучше, чем нажатие клавиши для этих ситуаций) через 500 мс ], сохраняя таймер в коллекции элемента #searchString .data () . Каждое нажатие клавиатуры очищает этот таймер, и, если ключ был введен, выполняет поиск немедленно, если не устанавливает еще один тайм-аут 500 мс перед автопоиском.
Я бы сделал каждое нажатие клавиши, используя функцию setTimeout с желаемой задержкой. Таким образом, эта функция сработает по истечении этого тайм-аута. Каждое нажатие клавиши затем удаляет таймер и устанавливает новый с помощью clearTimeout ();
См. Здесь несколько примеров с прокруткой мимо всех рекламных объявлений.
http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
См. Этот старый вопрос:
Как мне заставить мой живой поиск jQuery подождать секунду перед выполнением поиска?