0

こんにちは私は私のページでJqueryオートコンプリートドロップダウンを使用していますが、ドロップダウンがたくさんあります。特定のIDの幅を変更したいのですが、これについて教えてください。

4

3 に答える 3

2

オートコンプリートのドロップダウン自体がコンテンツに合うようにサイズ設定されていることがわかりました。

アイテムレンダリング関数のオーバーライドを使用して、各結果アイテムに書式設定htmlを追加し、アイテムレンダリング関数（オーバーライドした）内でアイテムのサイズを変更することで、ドロップダウンを適切に調整しました。

サイズ変更可能な「portlets」を使用しているため、親divのサイズに基づいて動的に必要なため、変数を使用して目的の幅を格納しました。ajax成功コールバックで目的の幅を計算し、次にレンダリング関数で、外側のアイテムコンテナのstyleプロパティを使用して幅を設定します（今のところ、すべての選択肢よりもうまく機能したため、アイテムごとのテーブルです！ ）：

$("#tbCustomerSearch").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "CustomerData.asmx/GetAutoComplete",
            data: "{ 'prefixText': '" + request.term + " }",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataFilter: function (data) { return data; },
            success: function (data) {
                var width = $('#customerSearch').width() - 50;
                searchResultTableWidth = width;
                response($.map(data.d.Matches, function (item) {
                    return { clicked: item, value: data.d.CleanedText }
                }))
            }
        });
    },
    minLength: 3,
    select: function (e, ui) {
        CustomerSearchSelect(ui.item.clicked);
    }
});

デフォルトのアイテムレンダリングをオーバーライドするために使用する関数：

function PatchAutocomplete() {

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
    var re = new RegExp(this.term, 'i');

        var t = "<table class='searchResults' style='width: " + searchResultTableWidth + "px'><tr><td>" +
                            item.clicked.CustomerName.replace(re, function (matchText) { return "<span class='matchedText'>" + matchText + "</span>" }) +
                        "</td><td class='alternateCell'>" +
                        ((item.clicked.MatchedName != "") ?
                                    ("<span class='alternate'>Alternate: <span class='alternateName'>" +
                                        item.clicked.MatchedName.replace(re, function (matchText) { return "<span class='matchedText'>" + matchText + "</span>" })
                                    + "</span></span>")
                                 : "") +
                                 "</td></tr></table>\n";
        return $("<li></li>")
          .data("item.autocomplete", item)
          .append("<a>" + t + "</a>")
          .appendTo(ul);

};

}

ただし、静的サイズが必要な場合は、次のcssを試してください。

ul.ui-autocomplete.ui-menu { width: 400px; }
于 2012-11-30T14:39:15.273 に答える
-1

CSSでこれを試してください

#<idHere> + .ui-menu {
     width:<widthHere>;
}

CSS の + は隣接する兄弟用であるため、特定の div または入力 ID のメニュー ドロップダウンをそれと一致させることができるはずです。

于 2012-11-30T14:00:14.270 に答える
-3

$('#foo')が付いたノードを含むJQueryオブジェクトを取得しますid="foo"。それはあなたが始めるはずです。これは、JQueryでセレクターとして知られているものです。JQueryで多くの作業を行う場合は、 http： //api.jquery.com/でセレクターなどの学習に時間を費やすとよいでしょう。セレクターは、言語で効果を発揮するためのかなりの核心です。 。

于 2012-11-30T14:00:01.133 に答える