Оптимизированный поиск с использованием Ajax и нажатия клавиш

Question

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

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

Answer 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.

Answer 2

Смотрите этот старый вопрос:

Как заставить мой живой поиск jQuery подождать секунду перед выполнением поиска?

Answer 3

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

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

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