0

由于这篇 Stack Overflow 帖子，我找到了一个很棒的插件，用于使用 Javascript 进行自动完成，称为 AutoSuggest：

用于分隔标签的插件（如 stackoverflow 的输入标签接口）

这是插件作者页面的链接：

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

autoSuggest 插件将用于输入查询的输入框（type="text"）的宽度设置为 1000px，比我想要的宽得多。它以某种方式覆盖了文档 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属性，但这也被忽略了。我发现另一个 Stack Overflow 帖子谈到在打开事件期间拦截宽度设置，但该示例是针对自动完成插件而不是 autoSuggest：

单独更改 jquery-ui 自动完成小部件的宽度

我还是使用以下代码尝试了它：

$(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

但这也不起作用。谁能告诉我如何设置输入框的宽度？注意我不是在谈论带有自动完成条目的下拉框，我指的是您键入触发自动完成下拉框的文本的主要输入区域。

4

1 回答 1

1

要设置AutoSuggest jQuery 插件的宽度，您需要ul.as-selections在随附的 CSS 中搜索并定义您的宽度：

CSS

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

如果你没有改变原来的CSS，它是这样的：

CSS 原始 声明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;
}
于 2012-05-19T02:48:10.403 回答