AJAX-поиск в стиле Facebook

Question

Я создал ajax-поиск в стиле Facebook для своего сайта, где по мере ввода результаты будут отображаться в красивом списке под вашим поиском.

$("#s").keyup(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
            type: "POST",
            url: "/livesearch.php",
            data: dataString,
            cache: false,
            success: function(html){
                $("#display").html(html).show();
            }
        });
    } else {return false; }  
});

$("body").click(function() {
        $("#display").hide();
});

Проблема в том, что это немного неэффективно, поскольку пользователь вводит слово, например, «футбол».Это выполнит 8 запросов к серверу.Что было бы более эффективным способом сделать это?в идеале, я думаю, он должен хранить запрос в течение 1 секунды перед выполнением поиска, а не мгновенного нажатия клавиш.но не уверен на 100%, как это сделать...

Answer 1

метод, о котором вы говорите, называется «Debouncing»

Обычно у меня есть функция «Debounce» внизу всех моих скриптов.

var debounce=function(func, threshold, execAsap) {
    var timeout;
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100); 
    }; 
};

И затем всякий раз, когда я делаю что-то, что принесет пользу от устранения дребезга, я могу использовать это в общих чертах.

Таким образом, ваш код будет переписан как

$("#s").keyup(debounce(function() {
    var searchbox = $(this).val();
    var dataString = 's='+ searchbox;
    if(searchbox!='') {
        $.ajax({
                type: "POST",
                url: "/livesearch.php",
                data: dataString,
                cache: false,
                success: function(html){
                        $("#display").html(html).show();
                }
        });
    } else {return false; }  
}
,350 /*determines the delay in ms*/
,false /*should it execute on first keyup event, 
       or delay the first event until 
       the value in ms specified above*/
));

Answer 2

Другой вариант — начать поиск после 2/3 символов.Ожидание в течение 1 секунды перед каждым запросом мне кажется не очень хорошим.Также постарайтесь отправлять на сервер как можно меньше данных, что также может ускорить запрос и ответ.

Answer 3

У вас может быть объект JSON, который находится где-то и выполняет поиск вместо многократного поиска в базе данных.Это не принесет слишком много лишнего, если только это не список из 1000 друзей или что-то в этом роде.