自动完成不能等到服务器加载JSON

时间:2013-01-02 18:28:07

标签: jquery jquery-autocomplete

正如我在上述主题中提到的,服务器加载大约200-1000毫秒(来自调试日志),但我必须再按一个键才能显示结果。即使我使自动完成延迟时间更长,它仍然无法显示结果,我仍然必须按一个键。

var timer;
//to wait for x ms until some chars typed
$("#keyword").bind("keyup", function(e) {
    if ($(this).val().length > 2)
    {
        window.clearTimeout(timer);
        timer = window.setTimeout(function(){               
            var datax = "";
            $(function () {
                $.getJSON("URI", ({"search":$("#keyword").val()}),function(datax){  
                    $("#keyword").autocomplete({
                        minLength: 3,
                        delay: 2000,
                        source: datax,
                        focus: function(event,ui){
                            $("#keyword").val( ui.item.nama);
                            return false;
                        },
                        select: function(event,ui){
                            $("#keyword").val( ui.item.nama);
                            $("#btnCariMainHeader").click();
                            return false;
                        }
                    })
                    .data("autocomplete")._renderItem = function(ul,item){
                            return $("<li>")
                            .data( "item.autocomplete",item)
                            .append("<a><table width='100%'><tr><td width='60px'>"+"<img height='60px' src='/thumb/" + item.value + ".jpg'/>"+"</td><td><b>"+item.nama+"</b><br><span class='suffix'>"+item.value+" "+item.bu+"</span><br><span class='suffix'>"+item.pos+"</span></td></tr></table></a>")
                            .appendTo(ul);
                    };
                });
            });
         },2000); 
    }
});

1 个答案:

答案 0 :(得分:2)

在您的代码中,您在获取JSON结果后创建了一个jQuery自动完成。

但请注意,jQuery自动完成不需要编写所有这些复杂的代码。您可以直接使用远程数据源(采用JSON格式)作为自动完成的输入。此外,不需要绑定keyup事件来显示建议,这将由插件自动完成。

$("#birds").autocomplete({
    source: "search.php", // This is the url that returns the JSON list
    minLength: 2,
    select: function(event, ui) {
        log(ui.item ? "Selected: " + ui.item.value + " aka " + ui.item.id : "Nothing selected, input was " + this.value);
    } });

您可以找到完整的documentation and sample here