JQuery Автопредставление и тайм-аут

Question

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

<input type="text" onkeyup="lookup(this.value);">

function lookup(inputString) {
 var time = new Date().getTime();
 var dummy_trigger = true;
 if(inputString.length == 0) {
  $('#suggestions').fadeOut(); // Hide the suggestions box
 } else {
 function timepassed(){
  now = new Date().getTime() - time;

  if(now > 3000 && dummy_trigger){
    alert("search");
    dummy_trigger = false;
  }
 }
 setInterval(timepassed, 1000);
 }
}

есть идеи? Спасибо!

Answer 1

Поскольку вы уже используете jQuery, либо добавьте плагин автозаполнения, либо используйте замену jQuery UI для этого плагина.

Вот ссылка на плагин, а также заметки о переходе пользовательского интерфейса jQuery. Там также есть заметки о плагине, идущем вперед: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

Answer 2

Хотя другие ответили на вопрос, отправив вас использовать плагин автозаполнения, на самом деле это не отвечает на вопрос: "Как сделать так, чтобы скрипт не срабатывал при каждом нажатии клавиши?"

Почему это важно? Нулевая задержка имеет смысл для локальных данных (более отзывчивый), но может создавать большую нагрузку для удаленных данных, при этом будучи менее отзывчивой. Если каждый поиск срабатывает после каждого нажатия клавиши, пользователь запускает 13 поисков просто для поиска слова "хризантема", когда сценарий должен просто подождать, пока пользователь не сможет понять, как, черт возьми, набрать остальную часть слова и ТОГДА уволить поиски.

Хотя большинство сценариев автозаполнения / автоматического предложения имеют переменную для тайм-аута Вот как реализовать свой собственный таймер, который ожидает пользователя с помощью jQuery:

<input type="text" id="query" />

Обратите внимание, что HTML не загрязнен никаким Javascript. Это потому, что Awesomeness jQuery не полагается на JS, встроенный в HTML для выполнения необходимых функций.

$(document).ready(function() {
    var timer,
        $suggestions = $('#suggestions'),
        $search_box = $('#query');

    $search_box.keyup(function() {
        if (timer) {
            // There is a running timer from a previous keyup
            // Clear this timer so we don't have overlap
            clearTimeout(timer);
        }

        if (this.length == 0) {
            $suggestions.fadeOut();
        } else {        
            timer = setTimeout(function() {
                search();
            }, 1000);
        }
    });

    function search() {
        var query = $search_box.val();
        alert('searching for ' + query);
    }
});

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