Question

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

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

以下是插件作者页面的链接：

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帖子谈到在 open 事件期间拦截宽度设置，但示例是针对 autocomplete 插件而不是autoSuggest：

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原始声明 ^{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;
}

如何设置jQuery的autoSuggest插件附加的文本区域的宽度？

1 个答案: