25

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

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

这并不是一个真正的解决方案，因为用户能够以不同的顺序触发各种自动完成，并且此代码只是根据它们添加到 DOM 的顺序来设置它们的样式。

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

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

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

有任何想法吗？

4

11 回答 11

50

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

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    open: function() { $('#div .ui-menu').width(300) }  
});
于 2011-04-19T21:46:58.850 回答
33

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

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

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

于 2011-05-22T20:35:24.010 回答
14

如果您有多个使用自动完成的控件，一个相当优雅的解决方案是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
            });
        }
    });
});

查看演示。

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

于 2011-05-25T07:38:56.350 回答
4

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

$('#myinput').autocomplete({
    source: yourUrlOrOtherSource,
    open: function () {
        $(this).data("autocomplete").menu.element.width(80);
    }
});
于 2011-08-07T10:00:35.707 回答
1

您可以将触发自动完成的输入框包装在 div 中，给 div 一个特定的 id，然后将自动完成 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>
于 2011-01-05T17:42:49.773 回答
1

无需使用额外的 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 的答案，这在我的情况下不起作用）。但是，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 hack，希望它有帮助！

于 2015-12-07T17:05:40.657 回答
0

我喜欢@Martin Lögdberg 的回答，但是如果您使用固定大小的宽度，而不是对返回的结果进行一些花哨的数学运算来设置宽度，那么您也可以在 CSS 中设置宽度

ul .ui-autocomplete {
  width: 50%;
}
于 2012-08-22T16:00:37.320 回答
0

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

$('.some-class').each(function(){
   var txt = $(this);
   txt.autocomplete({  
      source: mysource,  
      open: function() { 
          txt.autocomplete("widget").width(txt.outerWidth());
      }
   });  
});
于 2014-05-01T16:06:46.480 回答
0

阅读 API，我刚刚将一个类ui-front添加到我input的父div中，并且效果很好。

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

见这里：

[...] 将检查输入字段的父类是否有 ui-front类。如果找到具有 ui-front 类的元素，菜单将附加到该元素。不管值如何，如果没有找到任何元素，菜单将被附加到正文中。

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

于 2015-01-10T10:12:08.293 回答
0

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

$('#input').autocomplete({  
    source: mysource,  
    appendTo: '#div',  
    _resizeMenu: function() {
        this.menu.element.outerWidth( 500 );
    }
});
于 2015-11-05T15:47:49.720 回答
0

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

.ui-autocomplete { float: left; }

由于自动完成菜单已定位absolute并且是<body>. 我猜它从正文中获得了最大宽度，并且由于它是绝对位置，因此不能将其显示为内联块以避免占用所有可用空间。

.ui-autocomplete { width: 1%; }似乎也有效。

于 2016-11-08T12:41:28.577 回答