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

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

0 голосов
/ 18 марта 2011

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

<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);
 }
}

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

Ответы [ 2 ]

0 голосов
/ 23 февраля 2012

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

Почему это важно? Нулевая задержка имеет смысл для локальных данных (более отзывчивый), но может создавать большую нагрузку для удаленных данных, при этом будучи менее отзывчивой. Если каждый поиск запускается после каждого нажатия клавиши, пользователь запускает 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).

0 голосов
/ 18 марта 2011

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

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

...