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

Question

嗨，我在页面中使用了jquery自动完成下拉列表，但有很多下拉列表。我想改变特定ids的宽度。你可以帮我解决这个问题。

Answer 1

$('#foo')将为您提供一个JQuery对象，其中包含节点id="foo"。这应该让你开始。这就是JQuery作为选择器所知道的。如果你要在JQuery中做很多工作，那么你应该花些时间学习诸如选择器之类的东西，因为它们对于语言的有效性来说是相当重要的。

Answer 2

试试这个在CSS

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

的+ CSS中是相邻的兄弟姐妹，所以你应该能够在菜单下拉从一个特定的股利或输入ID匹配。

Answer 3

我在自动填充尺寸上找到了适合内容的下拉菜单。

我正在使用项目渲染函数的重写将格式化html添加到每个结果项目，并通过调整项目渲染函数（我已覆盖）中的项目大小，调整下拉以适合。

我使用了一个变量来存储所需的宽度，因为我使用的是可调整大小的“portlet”，因为我需要它根据父div的大小进行动态调整。我在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; }