Question

我正在一个页面上使用多个jquery-ui自动完成小部件，并且希望能够单独设置每个小部件的宽度。目前，我这样做：

$($('.ui-autocomplete')[0]).width(150);
$($('.ui-autocomplete')[1]).width(105);
$($('.ui-autocomplete')[2]).width(80);

这不是一个真正的解决方案，因为用户能够以不同的顺序触发各种自动复合，而这段代码只是根据它们添加到DOM的顺序对它们进行设置。

触发自动填充后，似乎会创建一个<ul>，然后将其放置在触发它的输入框下方。不幸的是，我在这个生成的<ul>中找不到任何唯一标识符来锁定并应用一些CSS。

我的问题与this one不同，因为我只使用默认的自动完成功能，而不是自动完成组合框。

此外，挖掘自动完成<ul>并将不同的自动填充框宽度与列表中的值匹配也不起作用，因为这些值是动态生成的。

有什么想法吗？

Answer 1

我使用'open'事件解决了这个问题。我需要一种方法来动态设置宽度以及其他项目，并且不需要额外的标记。

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});

Answer 2

我喜欢luqui的回答。但是，如果您处于无法使用appendTo功能的情况（可能是由于溢出隐藏等），您可以使用下面的代码确保您正在更改正确的列表。

$('#input').autocomplete({  
    source: mysource,  
    open: function() { 
        $('#input').autocomplete("widget").width(300) 
    }  
});

参考：http://docs.jquery.com/UI/Autocomplete#method-widget

Answer 3

如果你有多个使用自动完成的控件，一个相当优雅的解决方案是在最后一刻检索附加到控件的widget并修改它的CSS：

$(document).ready(function() {
    $("input#Foo").autocomplete({
        source: source
    });
    $("input#Bar").autocomplete({
        source: source,
        open: function(event, ui) {
            $(this).autocomplete("widget").css({
                "width": 400
            });
        }
    });
});

查看Demo。

如上所述，自动完成列表的宽度是在最后一刻计算的，因此您必须在open事件中对其进行修改。

Answer 4

您可以将“ui-menu”小部件附加到<input>，其$('#myinput').data("autocomplete").menu具有自动完成功能。所以要改变宽度你可以使用

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});

Answer 5

你可以在div中包装触发自动完成的输入框，给div一个特定的id，然后将auto complete ul附加到该div而不是文档正文。这样你就可以用基于div的css来定位它。

<!- this is how i would set up the div -->
<div class='autoSuggestWrapper' id='wrapper1'>
     <input class='autocomplete'>
</div>
<script>/* this is a way to config the autocomplete*/
   $( ".autocomplete" ).autocomplete({ appendTo: ".autoSuggestWrapper" });
</script>

Answer 6

不使用额外的Javascript代码，您可以使用1个简单的CSS行：

<style type="text/css">
    .ui-menu,.ui-menu>.ui-menu-item,.ui-menu-item>a {min-width:800px !important}
</style>

那为什么这个用 min-width ？

只是因为width被JS覆盖，有时甚至使用open: function(event, ui) { ... }的解决方案（如rkever's answer，这在我的情况下不起作用）。但是，min-width 不会被覆盖，因此它会派上用场。

此外，如果您不想使用 !important，您可以使用其余类进一步详细说明规则：

.ui-autocomplete.ui-menu.ui-widget.ui-widget-content.ui-corner-all,.ui-menu>.ui-menu-item,.ui-menu-item>a
 {min-width:800px}

这避免了我进一步的JS黑客攻击，希望它有所帮助！

Answer 7

我喜欢@MartinLögdberg的答案，但是如果你使用固定大小的宽度而不是在返回的结果上做一些花哨的数学来设置宽度，那么你也可以在CSS中设置宽度

ul .ui-autocomplete {
  width: 50%;
}

Answer 8

MartinLögdberg的改进回答。这对我来说效果更好，因为我在页面上有很多文本框

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});

Answer 9

阅读API，我只是将 ui-front 添加到输入的父 div 中，这很好。

<div class="ui-front">
    <label for="autosample" class="required">example</label>
    <input name="autosample" class="default-autocomplete" type="text">
</div>

请参阅here：

[...]输入字段的父级将被检查一类的 UI-前即可。如果找到具有ui-front类的元素，则菜单将附加到该元素。无论价值如何，如果没有找到元素后，菜单将附加到正文中。

附加元素决定了菜单的位置和宽度。

Answer 10

从jQuery UI 1.10开始，使用widget factory重写了自动完成小部件。作为其中的一部分，自动完成现在包含_resizeMenu扩展点，在显示之前调整菜单大小时调用该扩展点。

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});

Answer 11

我设法通过向自动完成菜单添加浮点数来解决这个问题。

Vec2.SIZE

由于自动填充菜单位于.ui-autocomplete { float: left; }并且是absolute的直接子项。我猜它从身体得到它的最大宽度，并且由于它的位置是绝对的，所以它不能显示为内联块以避免占用所有可用空间。

<body>似乎也有效。

分别更改jquery-ui自动完成小部件的宽度

11 个答案: