Подтвердить что ты не робот

Оптимизированный поиск с использованием ajax и keypress

У меня есть следующий код, поскольку я хочу искать базу данных, когда пользователь вводит текстовое поле. Этот код ниже работает отлично, но кажется немного неэффективным, как если бы пользователь печатал очень быстро, я потенциально делаю много больше запросов, чем необходимо. Поэтому, если пользователь вводит "парусный спорт"

Я ищу "паруса", "саили", "парус" и "парусный спорт"

Мне хотелось узнать, есть ли способ обнаружить какое-либо конкретное время между нажатиями клавиш, поэтому нужно только искать, если пользователь перестанет печатать на 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();
            });
        }
    }
4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете сделать что-то вроде этого:

$('#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();
    });
}

Что это такое - выполнить поиск (в keyup, лучше, чем keypress для этих ситуаций) после 500ms, сохраняя таймер в элементе #searchString .data(). Каждый keyup он очищает этот таймер, и если ключ был введен, выполняется поиск немедленно, если он не устанавливает другой тайм-аут 500ms перед автоматическим поиском.

Ответ 3

Что бы я сделал, это каждое нажатие клавиши использует функцию setTimeout с требуемой задержкой. Таким образом, эта функция будет срабатывать после этого таймаута. Каждое нажатие клавиши затем удаляет таймер и устанавливает новый, с clearTimeout();

См. здесь несколько примеров, прокручивая все рекламные объявления.

http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/