未正确设置自动完成宽度

我已经实现了一个 jQuery UI 自动完成框，它不是文本框的宽度，而是扩展了下拉选项来填充页面的剩余宽度。

看一下这个例子，你自己就可以看到: http://jsbin.com/ojoxa4

我尝试在创建列表后立即设置它的宽度，如下所示:

$('.ui-autocomplete:last').css('width',
$('#currentControlID').width()
);

这看起来没什么用。

我还尝试过使用页面样式设置宽度:

ui-autocomplete { width: 500px; }

这确实工作，令人惊讶的是，但这将意味着所有自动完成的页面将必须是相同的宽度，这是不理想的。

有没有办法单独设置每个菜单的宽度？或者更好的是，谁能解释一下为什么宽度对我来说不是正确的？

88402 次浏览
小开
最佳答案

原来问题在于菜单正在扩展以填充其父元素的宽度，默认情况下，父元素是主体。这可以通过给它一个正确宽度的包含元素来纠正。

首先我像这样添加了一个 <div>:

<div id="menu-container" style="position:absolute; width: 500px;"></div>

绝对定位允许我在输入后立即放置 <div>，而不会中断文档流。

然后，当我调用 autocomplete 时，我在选项中指定一个 appendTo参数，导致菜单被追加到我的 <div>，从而继承它的宽度:

$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});

这就解决了问题。但是，我仍然有兴趣知道为什么这是必要的，而不是插件正常工作。

小开

这里有一个自动补全的宽度选项，我在1.3.2中使用它。

$('#mytextbox').autocomplete(url, {
width: 280,
selectFirst: false,
matchSubset: false,
minChars: 1,
extraParams:{myextraparam:myextraparam},
max: 100
});
小开

我查了一下自动补全代码罪魁祸首就是这个小混蛋

_resizeMenu: function() {
var ul = this.menu.element;
ul.outerWidth( Math.max(
ul.width( "" ).outerWidth(),
this.element.outerWidth()
) );
},

我不确定 ul.width (“”)应该做什么，但是确定 ui.width (“”)。OutWidth ()总是返回主体的宽度，因为 ul 被附加到主体的宽度上。因此，宽度永远不会设置为元素宽度... 。

无论如何，要修复这个问题，只需将其添加到代码中

$element.data("autocomplete")._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}

这是窃听器吗？

编辑: 如果有人想要看到一个简化的测试用例的错误 给你，它是。

小开

我也遇到了这个问题，但是我意识到我只是忘了包含对 jquery.ui.autoComplete.css 样式表的引用。您在布局/母版页中包含了样式表吗？

小开

如果您正在使用官方的 jQuery ui 自动完成(我在1.8.16上) ，并希望手动定义宽度，您可以这样做。

如果您正在使用缩小版本(如果没有，那么通过匹配 _ resizeMenu 手动查找) ，请查找..。

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... 并将其替换为(在 Math.max 之前添加 this. options.width | |) ..。

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... 现在可以将宽度值包含到。自动完成({ width: 200})函数，jQuery 将支持该函数。如果没有，它将默认计算它。

小开

我知道这个问题早就有人回答了，但是我发现最简单的方法是使用自动补全的 id，并将宽度设置为100px

$('.ui-autocomplete-input#MyId').css('width', '100px');

在你打完 $('#MyId').autocomplete(...);电话之后。这样，您就不必将 DOM 中自动完成文本框的顺序与脚本绑定在一起。

小开

我知道这个问题很久以前就有答案了，但是我遇到了同样的问题。我的解决方案是增加立场: 绝对

小开

在开放事件中设置 css！

$('#id').autocomplete({
minLength: 3,
source: function(request, response) {
$.ajax({
url: "myurl",
dataType: "json",
type: 'POST',
data: {
'q': request.term,


'maxRows': 15
},
success: function(data) {


response($.map(data, function(item) {
return {
label: item.name,
}
})),
}
})
},
select: function(event, ui) {
$("#id").val(ui.item.label);
},
focus: function ( event, ui ){
$form.find('#id').val(ui.item.label);
return false;
},
open: function(){
$('.ui-autocomplete').css('width', '300px'); // HERE
}
})
小开

如果你不能动态设置宽度，没有任何工作试图包括这一点

Http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

无论是在一个链接的工作表或硬编码，并设置参数在这里。

在尝试了其他所有方法之后，它对我起作用了

小开

安德。我不知道我的解决方案是否能帮到您，但是对于 Jqueryui remote-with-cache. html，它是有效的。我只是在文本框中放入了 size属性。

请参阅以下代码:

<div class="demo">
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" size="30"/>
</div>
</div>
小开

我使用这个 放入式溶液，放入式溶液:

jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}

这基本上是 @ madcapnmckay的解决方案，但不需要改变原始源。

小开

我的解决方案是将自动补全添加到一个带 id 的 div 中，然后他们为这个特定的 ul 设置 CSS:

JQuery/JavaScript:

$("input[name='search-text]").autocomplete({
appendTo: "#item-search-autocomplete",
source: ....
});

CSS:

#item-search-autocomplete .ui-autocomplete {
width: 315px;
}

非常有效。

小开

我知道这个问题早就有答案了，但我认为还有更好的解决办法

$(".autocomplete").autocomplete({
...
open: function() {
$("ul.ui-menu").width( $(this).innerWidth() );
...
}
...
});

我觉得挺好的。

小开

我有这在我的 css 文件，所以自动完成采取的样式 span的 width:

 span input.ui-autocomplete-input {
width: 100%;
}
小开 

$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
$("#autocompleteID").autocomplete ("widget").css("width","300px");
}
});

小开

如果你喜欢使用 css，试试这个:

.ui-widget-content.ui-autocomplete {
width: 350px;
}

它将工作在每个自动完成输入。

小开

我遇到了同样的问题，并通过使用这段代码解决了它，虽然这是一个打击和试用类的东西，但它的工作原理，我不能设置宽度，所以我决定设置 max-width属性。

  $('.ui-autocomplete').css('margin-left','25%') //center align
$('.ui-autocomplete').css('max-width','38%') //hit and trial
$('.ui-autocomplete').css('min-width','38%') //hit and trial

看看什么最适合你。希望这有帮助。

小开

我的问题解决了(在 jQuery UI 1.13.1版中) ，只需在 .ui-autocomplete类中添加这两行

.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
/* my added style */
word-wrap: break-word;
width: 0;
/* my added style */
}

提交答案