更改特定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; }