Question

您好我在我的页面中使用Jquery Auto Complete下拉列表。但是有很多下拉列表。我想改变特定ID的宽度。请你帮我解决这个问题。

Answer 1

我发现自动填充功能的下拉菜单大小适合内容。

我在项目渲染功能上使用覆盖来为每个结果项添加格式化html，并通过调整项目渲染功能（我已覆盖）中的项目大小，将下拉列表调整为适合。 / p>

我使用一个变量来存储所需的宽度，因为我需要它基于父div的大小动态，因为我正在使用可调整大小的'portlets'。我在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; }

Answer 2

在CSS中尝试这个

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

CSS中的+用于相邻的兄弟姐妹，因此您应该能够匹配特定div或输入ID的菜单下拉列表。

Answer 3

$('#foo')将为您提供一个包含id="foo"节点的JQuery对象。这应该让你开始。这是JQuery中作为选择器所知的。如果您要在JQuery中做很多工作，那么您应该花些时间在http://api.jquery.com/学习选择器之类的东西，因为它们对于使用该语言非常有效。

更改特定id的jquery自动完成下拉列表的宽度

3 个答案: