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

Posted

技术标签:

【中文标题】单独更改 jquery-ui 自动完成小部件的宽度【英文标题】:Changing width of jquery-ui autocomplete widgets individually 【发布时间】:2011-06-04 04:15:44 【问题描述】:

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

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

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

触发自动补全的时候,好像会创建一个<ul>,然后定位到触发它的输入框下面。不幸的是,我在生成的<ul> 中找不到任何唯一标识符来锁定并应用一些 CSS。

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

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

有什么想法吗?

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

哇,这完全是一个很棒的解决方案。 2014 年签到 - 这仍然是一个了不起的解决方案。 注意这里,#div是页面上的一个元素:appendTo: '#div' 这对我不起作用;目前尚不清楚 #div 与原始 #input 相比是什么 - @Martin Lögdberg 答案对我有用 @wal 说#div 是另一个元素(最好是空的并且靠近#input),ui-menu 将放置在其中。这对我也不起作用,所以我想出了一个different way exclusively with CSS【参考方案2】:

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

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

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

【讨论】:

【参考方案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 事件中对其进行修改。

【讨论】:

$(this).autocomplete('widget').width(300); on open 方法对我来说很好 =),非常感谢。【参考方案4】:

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

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

【讨论】:

【参考方案5】:

您可以将触发自动完成的输入框包装在一个 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> 

【讨论】:

这似乎没有太大作用。自动完成仍然出现在父元素之外。 你的 html 是如何围绕输入设置的,你是如何初始化自动完成的? 我正在通过包装函数初始化自动完成功能。该函数不会在页面加载时调用,但我不确定这会影响样式方面的任何内容。 尝试将它包装在一个 div 而不是 中。然后在上面的配置中尝试 appendTo。我很确定您不能在跨度内附加 ul ,这可能是 appendTo 代码不起作用的原因。此外,您需要为每个包装器添加一个 id,以便您可以指定哪个包装器获得哪个宽度。 【参考方案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 hack,希望它有所帮助!

【讨论】:

完美答案...用这个代替JS代码【参考方案7】:

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

ul .ui-autocomplete 
  width: 50%;

【讨论】:

【参考方案8】:

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

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

【讨论】:

【参考方案9】:

阅读 API,我刚刚在 input 的父级 div 中添加了一个类 ui-front,效果很好。

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

见here:

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

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

【讨论】:

【参考方案10】:

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

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

【讨论】:

【参考方案11】:

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

.ui-autocomplete float: left;

由于自动完成菜单位于absolute&lt;body&gt; 的直接子级。我猜它从正文中获得了最大宽度,并且由于它是绝对位置,因此它不能显示为内联块以避免占用所有可用空间。

.ui-autocomplete width: 1%; 似乎也可以工作。

【讨论】:

以上是关于单独更改 jquery-ui 自动完成小部件的宽度的主要内容,如果未能解决你的问题,请参考以下文章

更改按钮文本时如何自动更改 QPushButton 宽度和 QMenuBar 角小部件宽度?

如何在桌面布局从4 * 5变为5 * 5时自动更改窗口小部件的宽度?

如何使用 ASP.NET 从 MSSQL 中获取 JQuery 自动完成小部件的数据

Yii2 DropDownList Onchange更改自动完成小部件“源”属性?

如何在 OnDemandGrid 中更改小部件的宽度

css 更改页脚小部件的宽度