10

JQuery 1.8 でオートコンプリート要素の外観をカスタマイズしようとしています。JQuery UI Web サイトの例を使用しました

$('#term').autocomplete(
    {source:'index.php?/Ajax/SearchUsers', minLength: 3, delay: 300}
).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li>" )
           .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
           .appendTo( ul );
};

残念ながら、JQuery UI 1.8 には ui-autocomplete データ フィールドがありません。JQuery UI 1.8 のオートコンプリートのテンプレートはどこで変更できますか?

4

3 に答える 3

21

jQuery UI サイトの例は jQuery UI 1.10 に基づいています。jQuery UI 1.8 は少し異なるため、コードを変更して機能させる必要があります。

主な違いは次のとおりです。

.data("autocomplete")._renderItem = function (ul, item) {
        return $("<li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "<br>" + item.desc + "</a>")
            .appendTo(ul);

属性を設定して、追加情報をオートコンプリートに追加する必要data("ui-autocomplete")があります。data("autocomplete")data

コード：

$("#project").autocomplete({
    minLength: 0,
    source: projects,
    focus: function (event, ui) {
        $("#project").val(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        $("#project").val(ui.item.label);
        $("#project-id").val(ui.item.value);
        $("#project-description").html(ui.item.desc);
        $("#project-icon").attr("src", "images/" + ui.item.icon);

        return false;
    }
})
    .data("autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "<br>" + item.desc + "</a>")
        .appendTo(ul);
};

デモ: http://jsfiddle.net/IrvinDominin/zvGKw/

于 2013-08-14T12:38:07.787 に答える
9

Autocomplete を利用するプラグイン/ウィジェットを作成する必要があり、同じ問題に遭遇しました。$(...).data() を調査したところ、jQuery UI のさまざまなバージョンがさまざまなキーで .data() にデータを格納していることが明らかになりました。

1.9 のアップグレード ガイドによると ( http://jqueryui.com/upgrade-guide/1.9/#changed-naming-convention-for-data-keys )

オートコンプリートは、item.autocomplete の代わりに ui-autocomplete-item を使用するようになりました ... これらの一部は純粋に内部的なものであり、一部はユーザーにとって有用でした。ユーザーにとって便利だったもの、特にウィジェット インスタンスとオートコンプリート アイテムは、古い名前を引き続きサポートしていますが、現在は廃止されています。

したがって、UI バージョンに関して _renderItem-extensionpoint を「オーバーライド」する必要があったときは、次のようにしました。

if ($input.data("autocomplete") !== undefined) {
    $input.data("autocomplete")._renderItem = options._renderItem;
} else ($input.data("ui-autocomplete") !== undefined) {
    $input.data("ui-autocomplete")._renderItem = options._renderItem;
} else {
    // fail fast, fail here!
}

これは、機能検出に最も近いものです。

于 2014-01-23T12:54:07.933 に答える
2

open 関数では、css を使用して、提案の外観を次のように変更できます。

open: function() {
    $('.ui-autocomplete').width('auto');
    $('.ui-widget-content').css('background', '#E1F7DE');
    $('.ui-menu-item a').removeClass('customClass');
}

あなたの場合、それはこのようになるはずです

$('#term').autocomplete(
    {
        source:'index.php?/Ajax/SearchUsers', 
        minLength: 3, 
        delay: 300,
        open: function() {
            $('.ui-autocomplete').width('auto');
            $('.ui-widget-content').css('background', '#E1F7DE');
            $('.ui-menu-item a').removeClass('ui-corner-all');
        }

    }
).data("ui-autocomplete")._renderItem = function( ul, item ) {
    return $( "<li>" )
       .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
       .appendTo( ul );
};
于 2013-08-14T12:17:18.813 に答える