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

Question

我正在一个页面上使用多个 jQuery UI 自动完成小部件，想要能够单独设置每个小部件的宽度。目前，我是这样做的：

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

这并不是一个解决方案，因为用户可以以不同的顺序触发各种自动完成功能，而这段代码只是根据它们添加到 DOM 中的顺序对其进行样式设置。

当自动完成被触发时，它似乎会创建一个 <ul> 并将其定位在触发它的输入框下面。不幸的是，我在这个生成的 <ul> 中找不到任何唯一的标识符来应用一些 CSS 样式。

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

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

有什么想法吗？

- CamelBlues

Answer 1

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

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

- rkever

---

哇，这绝对是一个很棒的解决方案。 - CamelBlues

2014 年报道 - 这仍然是一个惊人的解决方案。 - notaceo

请注意，这里的＃div是页面上的一个元素：appendTo: '#div' - Dan

这对我没用；关于原始的#input，不清楚#div是什么 - @Martin Lögdberg的答案对我有用。 - wal

@wal 那个 #div 是另一个元素（最好是空的，并且靠近 #input），ui-menu 将被放置在其中。这对我也没有起作用，所以我找到了一种完全基于 CSS 的不同方法。 - Armfoot

我还需要动态设置宽度（只需添加一些像素），然后.width()对我无效，但是.outerWidth()恰好做到了我想要的事情。也许我误解了这两种方法之间的区别，但也可能不仅仅是我一个人这样。 ;) - Kout

Answer 2

我喜欢luqui的答案。但如果你遇到无法使用appendTo功能的情况（可能是由于overflow:hidden等原因），您可以使用下面的代码确保对正确的列表进行更改。

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

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

- Martin Lögdberg

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
            });
        }
    });
});

查看演示。

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

- Salman A

---

$(this).autocomplete('widget').width(300); 在打开方法中对我来说运行良好 =），非常感谢。 - overallduka

Answer 4

您可以通过使用$('#myinput').data("autocomplete").menu来附加自动完成功能的“ui-menu”小部件到<input>。因此，要更改宽度，您可以使用：

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

- Oleg

Answer 5

不需要额外的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？简单来说，因为 JS 会覆盖 width，有时甚至会使用 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黑客攻击，希望能有所帮助！

- Armfoot

---

完美的答案...最好使用这个而不是JS代码。 - Sumit Kumar

Answer 6

你可以将触发自动完成的输入框包装在一个 div 中，给该 div 指定一个特定的 id，然后将自动完成 ul 添加到该 div 而不是文档的 body 中。这样，你就可以基于该 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> 

- scrappedcola

---

那似乎没有太大的影响。自动完成仍然出现在父元素之外。 - CamelBlues

你是如何设置输入框的HTML并初始化自动完成功能的？ - scrappedcola

<span class="wrapper"><input class="autocomplete1"/></span> 而且我通过一个包装函数来初始化自动完成。该函数在页面加载时不被调用，但我不确定这对样式有什么影响。 - CamelBlues

尝试将其包装在一个<div>而不是<span>中。然后尝试上面配置中的appendTo。我很确定你不能将<ul>附加到<span>中，这可能是为什么appendTo代码无法工作的原因。另外，您需要向每个包装器添加一个id，以便您可以指定哪个宽度适用于哪个。 - scrappedcola

Answer 7

阅读API后，我刚刚在我的的父级

中添加了一个类，这很好用。

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

请查看这里：

[...] 将检查输入字段的父元素是否具有 ui-front 类。如果找到具有 ui-front 类的元素，则菜单将附加到该元素。无论值如何，如果未找到元素，则菜单将附加到 body。

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

- Le Moineau

Answer 8

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

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

- saluce

Answer 9

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

.ui-autocomplete { float: left; }

由于自动完成菜单的位置是absolute，并且是的直接子元素。我猜它从body获取其最大宽度，而由于它的绝对位置，无法显示为inline-block以避免占用所有可用空间。

此外，.ui-autocomplete { width: 1%; }似乎也可以解决问题。

- Trevald

Answer 10

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

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

- ants