是否可能/如何像谷歌插件一样为jQuery自动完成设置延迟

Is it possible / How to set a delay for jQuery Autocomplete like Google plugin?

本文关键字:jQuery 一样 延迟 设置 何像 谷歌 插件 是否      更新时间:2023-09-26

我像谷歌一样使用jQuery插件Autocomplete,它运行得很好。但是AJAX请求是在每次按键时触发的。也就是说,字符串washington将引起十(!)个请求。使用选项minLength可以减少请求的数量。但例如,对于minLength:3,我们仍然发送七个请求(从第四个字符开始)。

$(function() {
    $("#bar").autocomplete({
        minLength: 3,
        limit: 5,
        source : [
            function(query, add) {
                fooNumber = $('#foo-number').val();
                $.getJSON("/my/ajax/controller/bar?data[number]=" + query + "&data[foo_name]=" + fooNumber, function(response) {
                    add(response);
                })
        }],  
    });
});

当用户从300 ms开始就没有输入时,如何防止即时请求服务器并使脚本只发送新的请求

这可能很有用。(未测试)

//global variable
var keyPressed = new Date();
// Call where you're watching for pressed keys.
var updateKeyPressed = function(){
    keyPressed = new Date();
}
$(function() {
    $("#bar").autocomplete({
        minLength: 3,
        limit: 5,
        appendMethod:'replace',
        closeOnBlur: true,
        source : [
            function(query, add) {
                var currentDate = new Date();
                setInterval(function(){
                    currentDate = new Date();
                    if (currentDate.getTime() > keyPressed.getTime()) {
                        orderApplicationNumber = $('#foo-number').val();
                        $.getJSON("/my/ajax/controller/bar?data[number]=" + query + "&data[foo_name]=" + fooNumber, function(response) {
                            add(response);
                        });
                    }
                }, 300);
            }
        ],
    });
});

对不起,我理解错了。你可以用标志做一些逻辑,并用源代码中的函数设置时间,比如(还没有测试它):

var定时器;

$("#bar").autocomplete({
        minLength: 3,
        limit: 5,
        cacheLength: 1,
        source : [
            function(query, add) {
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fooNumber = $('#foo-number').val();
                    $.getJSON("/my/ajax/controller/bar?data[number]=" + query + "&data[foo_name]=" + fooNumber, function(response) {
                        add(response);
                    })
                }, 300)
        }],
    });

或者你可以切换到jquery ui>

原始答案:

jquery ui自动完成有一个内置参数,延迟(DOCS)

来自文档:

$( ".selector" ).autocomplete({
  delay: 500
});