окно поиска php / jquery

Question

Я пытаюсь реализовать окно поиска, используя php и jquery (результаты поиска поступают из базы данных).Что я хочу сделать, так это то, что, когда пользователь вводит данные в поле поиска, делается запрос, чтобы найти данные, содержащие ключевое слово, введенное пользователем в поле поиска.У меня проблема в том, что у меня что-то вроде этого:

$("#my_search_box").keyup(function(){

    retrieve_results($(this).val());    

});

Проблема с этим заключается в том, что функция retrieve_results () вызывается каждый раз, когда пользователь заканчивает вводдля этого есть ключ).Следовательно, это может быть очень медленным, потому что, если пользователь вводит слово, которое содержит 10 символов, функция retrieve_results () вызывается 10 раз подряд.Кроме того, я должен упомянуть, что внутри моей функции retrieve_results () я делаю Ajax-запрос, используя jQuery $ .ajax для получения результатов.Поэтому мой вопрос заключается в следующем:

Как мне сделать так, чтобы моя функция retrieve_results () не выполнялась каждый раз, когда пользователь прекращает печатать (каждый раз, когда клавиша нажата).Я хочу сохранить эту функциональность, хотя я не хочу, чтобы пользователь нажимал кнопку «Поиск» или что-то еще.Я просто хотел бы, чтобы мою функцию retrieve_results () вызывали только один раз, когда пользователь завершил ввод всех ключевых слов (не каждый раз, когда пользователь вводит букву или что-то в этом роде)

Answer 1

В идеале, вы хотите, чтобы поиск выполнялся только для самого последнего символа, который вводит пользователь.Лучший способ сделать это - дать ему достаточно времени для непрерывного набора текста, а если он остановится (даже подумать), запустите поиск.Использование setTimeout само по себе не сработает, потому что даже это срабатывает несколько раз.Вы должны очистить тайм-аут, используя clearTimeout.

. Для достижения желаемого эффекта вы можете использовать следующее:

$(document).ready(function() {
    var timeout,
        $search_box = $('#my_search_box');

    $search_box.keyup(function() {
        if (timeout) {
            clearTimeout(timeout);
        }

        timeout = setTimeout(function() {
            search();
        }, 1000);
    });

    function search() {
        var search_txt = $search_box.val();
    }
});

Вот что происходит: Мы назначаем таймер setTimeoutпеременная, которая должна быть объявлена ​​над вашей функцией keyup, и проверять эту переменную каждый раз, когда срабатывает keyup.Если существующий setTimeout находится в процессе, очистите его, чтобы он не вызывал функцию search(), и создайте новый таймер, настроенный на ожидание указанного количества миллисекунд (в моем примере - 1000).

См. Следующую демонстрационную версию JSFiddle: http://jsfiddle.net/highwayoflife/WE4Fr/

Answer 2

Вы можете запустить тиммер ... скажем ... после первого ключа ... если интервал больше 2 секунд (между ключами), выполните поиск, иначе подождите http://api.jquery.com/delay/

ПРИМЕР (из Чтобы отложить вызов функции JavaScript с помощью jQuery ):

  $("#button").bind("sample",function() {
      sample();
    });

    $("#button").click(function(){
      $(this).delay(2000).trigger("sample");
    });

Не было времени для тестирования с задержкой

АЛЬТЕРНАТИВА (проверено) сделано за 3 минуты, уже поздно (2:12 утра по местному времени)

$("#my_search_box").keyup(function(){
            setTimeout(search, 30000);
});
function search(){
        alert('ok');
}

Answer 3

Что-то вроде этого должно сделать это.Вы создаете глобальную переменную для хранения запроса и еще одну, чтобы узнать, прошло ли достаточно времени для нового вызова retrieve_results.Вы обновляете searchQuery каждый ключ, но выполняете retrieve_results только по истечении желаемого времени.Я надеюсь, что это поможет вам.

    searchQuery="";
    timeIsUp=true;

    $("#my_search_box").keyup(function(){

      searchQuery=$(this).val();

      if(timeIsUp){
        timeIsUp=false;
        setTimeOut("retrieve_results(searchQuery); timeIsUp=true",500); 
      }

    });

Answer 4

Я бы порекомендовал использовать либо метод задержки в jQuery, либо функцию setTimeout () в JavaScript, где интервал будет сбрасываться на исходный интервал при каждом выполнении метода keyup. Вот краткое объяснение метода setTimeout () и нескольких других методов таймера, найденных в JavaScript.