0

嗨，我在我的页面中使用 Jquery 自动完成下拉菜单。但是有很多下拉菜单。我想更改特定 ID 的宽度。你能帮我解决这个问题吗？

4

3 回答 3

2

我发现我的自动完成下拉菜单的大小适合内容。

我在项目渲染函数上使用覆盖来为每个结果项目添加格式化 html，并通过调整项目渲染函数（我已经覆盖）中的项目大小，调整下拉菜单以适应。

我使用一个变量来存储所需的宽度，因为我需要它根据父 div 的大小动态地存储，因为我正在使用可调整大小的“portlet”。我在 ajax 成功回调中计算所需的宽度，然后在渲染函数中，我使用外部项目容器上的样式属性设置宽度（现在每个项目一个表，因为它对我来说比我尝试的所有替代方案都更好！ ) :

$("#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 回答