Как функция AutoSuggest для тегов в StackOverflow позволяет избежать запросов при каждом нажатии клавиши

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

Было бы здорово, если бы кто-нибудь мог объяснить, как я могу реализовать то, что делает stackOverflow, не запуская запрос при каждом нажатии клавиши.


jquery autocomplete autosuggest
person Sid    schedule 06.11.2009    source источник
comment
Я стараюсь не использовать плагин.   -  person Sid    schedule 06.11.2009

Ответы (2)


arrow_upward
6
arrow_downward

У меня есть аналогичная функция в одном из моих оконных приложений. Когда пользователь вводит символ, таймер запускается с интервалом в 1 секунду. В событии Tick запускается поиск. Если пользователь вводит снова, таймер перезапускается. Таким образом, поиск выполняется только в том случае, если клавиатура не используется более секунды.

Краткий пример (он на С#, но достаточно прост):

public partial class Form1 : Form
{
    private System.Windows.Forms.Timer timer = new System.Windows.Forms.Timer();

    public Form1()
    {
        InitializeComponent();

        timer.Interval = 1000;
        timer.Tick += new EventHandler(timer_Tick);
    }

    void timer_Tick(object sender, EventArgs e)
    {
        timer.Stop();

        // Do search, or what ever you want to do
        Console.WriteLine("Searching...");
    }

    private void textBox1_KeyDown(object sender, KeyEventArgs e)
    {
        if (timer.Enabled)
        {
            timer.Stop();
        }

        timer.Start();
    }
}

Я не разбираюсь в Javascript, но ответ из здесь поможет вам, я думаю:

<input name="domain" type="text" id="domain" onKeyUp="javascript:chk_me();">

var timer;
    function chk_me(){

       clearTimeout(timer);
       timer=setTimeout(function validate(){...},1000);
    }
person Philip Wallace    schedule 06.11.2009
comment
Спасибо, Филипп. Итак, как бы я управлял отметкой времени. Мне нужно что-то вроде переменной класса для сохранения последней метки времени. Я новичок в javascript, хотя использую его каждый день. Возможно ли это без создания классов Javascript - person Sid; 06.11.2009
comment
Взгляните на принятый ответ на этот вопрос: stackoverflow.com/questions /1381751/ - person Philip Wallace; 06.11.2009

arrow_upward
2
arrow_downward

метод, на который вы ссылаетесь, называется "Debouncing"

У меня обычно есть функция "Отменить дребезг" внизу всех моих скриптов.

var debounce=function(func, threshold, execAsap) {
    var timeout;
    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };
        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100); 
    }; 
};

И затем, всякий раз, когда я делаю что-то, что выиграет от устранения дребезга, я могу использовать его в общем

Таким образом, ваш код будет написан как

$("#search_box").keyup(debounce(function() {
    //do stuff in this function  
}
,350 /*determines the delay in ms*/
,false /*should it execute on first keyup event, 
       or delay the first event until 
       the value in ms specified above*/
));

см. AJAX-поиск в стиле Facebook для аналогичного варианта использования...

person ekhaled    schedule 07.11.2009