如何設置由jQuery的autoSuggest插件附加的文本區域的寬度？

Question

我發現了一個偉大的插件做自動完成的JavaScript叫的AutoSuggest感謝這個堆棧溢出職位：

plugin to separate tags (like the stackoverflow's input tags interface)

這裏是鏈接到插件作者的網頁：

http://code.drewwilson.com/entry/autosuggest-jquery-plugin

自動提示插件是設置輸入框的用於輸入查詢1000像素的寬度（類型=「文本」），寬得多的比我想。它是某種overridding寬度在輸入框樣式屬性在HTML文檔設置：

<div NAME="divAutoSuggest" ID="divAutoSuggest"> 
     <input type="text" NAME="editQuery2" ID="editQuery2" wrap="soft" style="margin-left:5px;width:600px;" title="Enter your search query here using plain English"></input> 
</div> 

我使用的cols屬性在輸入框中定義也試過，但那個太忽視。我發現這個其他堆棧溢出的職位，談到開放事件過程中截取的寬度設定，但例如是爲自動完成插件，而不是自動提示：

Changing width of jquery-ui autocomplete widgets individually

我試了一下，反正使用此代碼：

$(document).ready 
(
function() 
{ 
    // Put jQuery related initialization code that must occur after the document is ready here. 

    $("input[type=text]").autoSuggest 
    (
     data.items, 
     { 
      selectedItemProp: "name", 
      searchObjProps: "name", 
      startText: "Enter Evernote tags here...", 
      open: function(event, ui) 
      { 
       $(this).autoSuggest("widget").css 
       (
        { 
         "width": 600 
        } 
       ); 
      } 
     } // data. items 
    ); // $("input[type=text]").autoSuggest 
} // function() 
); // $(document).ready 

但是，這也沒有奏效。任何人都可以告訴我如何設置輸入框的寬度？注意我不是在談論帶有自動完成條目的下拉框，我指的是您輸入觸發自動完成下拉框的文本的主要輸入區域。

Answer 1

要設置寬度爲AutoSuggest jQuery Plugin，你需要在隨附的CSS搜索ul.as-selections和定義寬度：

CSS

ul.as-selections { 
    ... 
    width: 400px; // define your width 
    ... 
} 

---

如果你的避風港不改變原來的CSS，就像這樣：

CSS原來的DECLA口糧^{爲ul.as-selections}

ul.as-selections { 
list-style-type: none; 
    border-top: 1px solid #888; 
    border-bottom: 1px solid #b6b6b6; 
    border-left: 1px solid #aaa; 
    border-right: 1px solid #aaa; 
    padding: 4px 0 4px 4px; 
    margin: 0; 
    overflow: auto; 
    background-color: #fff; 
    box-shadow:inset 0 1px 2px #888; 
    -webkit-box-shadow:inset 0 1px 2px #888; 
    -moz-box-shadow:inset 0 1px 2px #888; 
}