0

この件について述べたように、サーバーは（デバッグログから）約200〜1000ミリ秒でロードされましたが、結果を表示するにはもう1つのキーを押す必要があります。オートコンプリートの遅延を長くしても、結果を表示できません。キーを押す必要があります。

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

1 に答える 1

2

コードでは、JSONの結果を取得した後にjQueryオートコンプリートを作成しています。

ただし、jQueryオートコンプリートでは、これらすべての複雑なコードを記述する必要はないことに注意してください。オートコンプリートへの入力として、リモートデータソース（JSON形式）を直接使用できます。また、提案を表示するためにキーアップイベントをバインドする必要はありません。これは、プラグインによって自動的に実行されます。

$("#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);
    } });

完全なドキュメントとサンプルはここにあります。

于 2013-01-02T18:47:03.300 に答える