jQuery UI的 - Autcomplete - 基於內容

Question

動態設置是否有一種方法來設置動態自動完成對象的寬度，基於文本的長度返回給它？

感謝

Answer 1

這一次花了一點努力，但我相信我有一個合理的解決方案。這主要需要爲了改變菜單的默認行爲結合到自動完成構件的「開放式」的事件，因爲它顯示，以及修改幾個CSS屬性來幫助我們。

的方法帶有一個警告：這將導致後臺酒吧僅跨越文本的長度而不是在IE7中菜單的所有道路。它將在IE8 +以及所有其他主流瀏覽器中正常運行。我會鼓勵你把它當作一個問題，因爲你會定製解決方案的視覺差異的市場份額不到3％，甚至可能你的實際收視率更低。

的CSS

.ui-autocomplete { 
    max-height: 200px; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 

.ui-autocomplete .ui-menu-item a { 
    padding-right: 20px; 
} 

這些樣式添加到您的項目，以幫助有視覺顯示。 .ui-autocomplete樣式對於創建可滾動的菜單項目列表相當標準，並且您可能已經在使用它了。適用於錨點的正確填充是爲Firefox和Webkit瀏覽器中的滾動條提供適當的空間。它比直接應用於UL容器更好。

jQuery的

$(".myAutoComplete").autocomplete({ 
    ... 
    open: function(e, ui) { 
     $("ul.ui-autocomplete:visible").css("width", "").find("a").html(function(i, html) { 
      return html.replace(/\s/g, " "); 
     }); 
    } 
    ... 
}); 

綁定到開放事件的處理是在它的作用主要是顯而易見的。首先，它使用的選擇器查找唯一可見的自動完成菜單。謝天謝地，只有在顯示自動完成菜單後，纔會打開該事件。這有助於您的處理程序在網頁上有多個自動填充小部件的情況下引起注意。從那裏，它將刪除直接應用於無序列表的CSS的「width」屬性。然後，在列表中查找所有的錨後裔，並沒有一個全球性的與非中斷空格在HTML中的所有空白代替。該NBSP迫使錨通過增加其寬度，而不是文本換行到一個新行，從而提高整個菜單的寬度做出迴應。

您可以see a working demo here。我建議在「ab」後面加上「deep」，以便在發生變化時查看調整大小的差異。對不起，代碼中的顏色很長（sorce），但我想讓您有機會獲得一系列可能的建議，以查看調整大小的差異。

編輯

不知道我在想什麼，但今天，更簡單的方法是提供以下附加風格和溝開放的事件處理程序：

.ui-autocomplete .ui-menu-item a { 
    white-space: nowrap; 
} 

Answer 2

在在CSS確保寬度設置爲auto：

.ui-autocomplete { 
    height: 250px; 
    max-height: 250px; 
    overflow-y: auto; 
    /* prevent horizontal scrollbar */ 
    width:auto; 
} 

凡自動完成小部件CRE ates列表項將li空白樣式設置爲nowrap：

input.data("autocomplete")._renderItem = function(ul, item) { 
    return $("<li style='white-space:nowrap;'></li>") 
     .data("item.autocomplete", item) 
     .append("<a>" + item.label + "</a>") 
     .appendTo(ul); 
};