Эффективный AutoSuggest с jQuery?
Я работаю для создания плагина jQuery AutoSuggest, вдохновленного центром внимания Apple.
Вот общий код:
$(document).ready(function() {
$('#q').bind('keyup', function() {
if( $(this).val().length == 0) {
// Hide the q-suggestions box
$('#q-suggestions').fadeOut();
} else {
// Show the AJAX Spinner
$("#q").css("background-image","url(/images/ajax-loader.gif)");
$.ajax({
url: '/search/spotlight/',
data: {"q": $(this).val()},
success: function(data) {
$('#q-suggestions').fadeIn(); // Show the q-suggestions box
$('#q-suggestions').html(data); // Fill the q-suggestions box
// Hide the AJAX Spinner
$("#q").css("background-image","url(/images/icon-search.gif)");
}
});
}
});
Проблема, которую я хочу решить хорошо и изящно, не уничтожает разъединение. Прямо сейчас код выше поражает сервер каждый раз, когда Вы вводите ключ, и не ожидает Вас, чтобы по существу закончить вводить. Что лучший способ состоит в том, чтобы решить это? A. Уничтожать предыдущий запрос Ajax? B. Некоторый тип кэширования Ajax? C. Добавляющий некоторый тип задержки, чтобы только отправить.AJAX (), когда человек прекратил вводить приблизительно для 300 мс?
4 ответа
Попробуйте использовать плагин Ben Alman's Throttle & Debounce
Позволяет «отложить» действия до тех пор, пока пользователь не закончит работу.
Чтобы увидеть пример того, как его использовать, посмотрите его пример устранения неполадок с мнимым автозаполнением
Ваш код в основном стал бы
var qinput = $('#q').bind('keyup', $.debounce( 250, function() {
if( $(this).val().length == 0) {
// Hide the q-suggestions box
$('#q-suggestions').fadeOut();
} else {
// Show the AJAX Spinner
qinput.addClass('loading');
$.ajax({
url: '/search/spotlight/',
data: {"q": $(this).val()},
success: function(data) {
$('#q-suggestions')
.fadeIn() // Show the q-suggestions box
.html(data); // Fill the q-suggestions box
// Hide the AJAX Spinner
qinput.removeClass('loading').addClass('search');
}
});
}
}));
CSS
.loading{
background: url('/images/ajax-loader.gif');
}
.search{
background: url('/images/icon-search.gif');
}
Вы заметите, что я удалил ваше фоновое изображение css и заменил их на addClass / removeClass. Намного проще управлять содержимым css в файлах css.
Я не знаю, какую БД вы используете ИЛИ используете ли вы жестко закодированный файл!?
в любом случае хорошей отправной точкой является подождать хотя бы a TOT NUMS символов для
, например: после 3 (это минимальная длина слова для поиска в MySQL в большинстве случаев) символов , тогда вы можете начать поиск в своей БД или json файл!
Я думаю, вы должны поручить PHP или другим сложную работу, такую как ФИЛЬТРАЦИЯ и т.д .. , прежде чем отправлять ответ!
Между прочим, я думаю, что один из лучших AutoSuggest - это тот из brandpankingnew
Я бы выбрал вариант C. Не ждите, пока пользователи перестанут печатать, а подождите некоторое время (200 мс?) После первого нажатия клавиши . Затем, по истечении этого времени, во многих случаях вы будете получать дополнительные нажатия клавиш, а затем вы будете использовать набранные символы для получения автозаполнения. Если после отправки запроса будет нажата другая клавиша, вы снова начнете отсчет.
И вам обязательно нужно сделать кеширование; люди будут использовать backspace, и вам придется снова показать список имен.
В плагине автозаполнения есть опция таймаута, которую можно установить для этого.