web-dev-qa-db-ja.com

jQuery UI-オートコンプリート結果のフォーマット。画像を追加できますか？

bassistance.de autocomplete からjQuery UIオートコンプリートに移行しています。 jQuery UIバージョンの例はそれほど多くは見つかりませんが、ドキュメントは少しまばらです。それは私だけかもしれません。

オートコンプリートドロップダウンのルックアンドフィールを変更する方法を説明する例/チュートリアルがあるかどうか知りたいのですが。私のコードは次のとおりです：

$( "#SearchInput" ).autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "http://servername/index.pl",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function( data ) {
                response( $.map( data.items, function( item ) {
                    return {
                        label: item.id + " - " + item.label,
                        value: item.id
                    }
                }));
            }
        });
    },
});

これは機能し、ハイフンで区切られたIDとラベルが表示されます。理想的には、結果の表示方法をフォーマットする方法を知りたいです。 IDが欲しいのですが、IDの下にラベルがあります。できれば、テキストの右側に画像を表示する方法を教えてください。

誰かがこれを達成する方法に関する指針を持っているなら、私は素晴らしいと思います。

jqueryjquery-uijquery-ui-autocomplete
19
martok

結果のレイアウトをカスタマイズする方法については、JqueryUI Webサイトにいくつかのドキュメントがあります： http://jqueryui.com/demos/autocomplete/#custom-data 。

いくつかの例：

$( "#SearchInput" ).autocomplete({ .... }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + "<img src='" + item.imgsrc + "' />" + item.id+ " - " + item.label+ "</a>" )
            .appendTo( ul );
    };
29
Yman