2

カスタムドロップダウンメニューを使用してjQueryオートコンプリートを実装しようとしています。data（）._ renderItemメソッド（コメントアウト）を使用してメニュー項目をカスタマイズできますが、これによりメニューの「選択」機能が無効になります。「ラベル」フィールドを使用してメニュー項目をカスタマイズしようとすると、「選択」機能は機能しますが、メニュー項目のHTMLは文字列として解釈されます。誰かがこれを達成するためのクリーンな方法を提案できますか？

$("input#selectedInput")

.bind("autocompleteselect", function (event, ui) {
alert("Sel item " + JSON.stringify(ui.item.json));
})



.autocomplete({
appendTo: "#list",
source: function (request, response) {
    //alert("success");
    $.ajax({
        //url: "http://itunes.apple.com/search?term=jack+johnson&entity=musicTrack",
        url: "Example REST URL",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: request.term
        },

        success: function (data) {
            response($.map(data.results, function (item) {
                itunesJson = item;
                return {
                    label: "<li><img src='" + item.artworkUrl30 + "' alt='no photo'/>" + item.trackName + "</li>",
                }
            }));
        },
    });
}
})
/*
        .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append("<img src='"+item.value+"' alt='no photo'/>"+ item.label)
            .appendTo( ul );
    };
        */
4

3 に答える 3

0

ここを読んでみてください：http ：//www.devbridge.com/projects/autocomplete/jquery/ 。これは、オートコンプリートが必要なときに使用するものです。設定は本当に簡単です。そして、それがあなたのニーズに合わない場合は、教えてください。

于 2012-04-28T10:22:25.810 に答える
0

簡単な回避策の1つは、成功呼び出しでラベルが割り当てられた後、JavaScriptを使用してHTMLエンコードすることです。list

var elm = $("#list");
elm.html(elm.text());

ワーキングフィドル： http： //jsfiddle.net/naveen/yRwH7/

于 2012-04-28T12:31:46.443 に答える
0

リターンHTMLの画像の周りにアンカータグを配置してみてください。..。

.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
         .data( "item.autocomplete", item )
         .append("<a><img src='"+item.value+"' alt='no photo'/></a>"+ item.label)
         .appendTo( ul );
于 2012-05-24T22:04:11.133 に答える