Эффективный AutoSuggest с JQuery?

Question

Я работаю над созданием плагина 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 мс или около того?

Answer 1

Попробуйте использовать Плагин 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-файлах.

Answer 2

Я не знаю, какую БД вы используете ИЛИ используете ли вы жестко закодированный файл!?

В любом случае, хорошей отправной точкой является ожидание, по крайней мере, TOT NUMS символов для

es .: после 3 (в большинстве случаев это минимальная длина слова для поиска mysql) тогда вы можете начать поиск в вашей БД или в файле json!

Я думаю, что вы должны дать PHP или другим людям такую ​​тяжелую работу, как ФИЛЬТРАЦИЯ и т. Д. И т. Д. прежде чем отправить обратно ответ!

кстати, я думаю, один из лучших AutoSuggest - это один из брендовpankingnew

Answer 3

Я бы выбрал вариант C. Не ждите, пока пользователи прекратят печатать, но подождите некоторое время (200 мс?) После первого нажатия клавиши. Затем по истечении этого времени вы будете во многих случаях получать дополнительные нажатия клавиш, а затем вы будете использовать набранные символы, чтобы получить автозаполнение. Если после отправки запроса будет нажата другая клавиша, вы начнете считать снова.

И вам определенно следует также заняться кэшированием; люди будут использовать backspace, и вам придется снова показывать список имен.

Answer 4

Плагин автозаполнения имеет опцию тайм-аута, которую вы можете установить для этого.

http://docs.jquery.com/Plugins/AutoComplete/autocomplete