单独更改jquery-ui自动完成小部件的宽度 [英] Changing width of jquery-ui autocomplete widgets individually

问题描述

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

I'm working with mutiple jquery-ui autocomplete widgets on one page and want to be able to set the widths of each one individually. Currently, I'm doing it like this:

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

这不是一个真正的解决方案，因为用户能够触发不同的自动完成在不同的订单，

Which isn't really a solution since the user is able to trigger various autocompletes in different orders, and this code just styles them based on the order they are added to the DOM.

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

When autocomplete is triggered, it seems to create a <ul> and then position it under the input box that triggered it. Unfortunately, I can't find any unique identifiers in this generated <ul> to latch on to and apply some CSS.

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

My issue is different from this one, since I'm using just the default autocomplete, and not the autocomplete-combobox.

同时，挖掘自动完成< ul> ，并将不同的自动完成框宽度与列表中的值

Also, digging into the autocomplete <ul> and matching different autocomplete box widths with the values inside the list doesn't work either, since the values are dynamically generated.

任何想法？

推荐答案

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

I resolved this issue using the 'open' event available. I needed a way to dynamically set the width, along with other items and did not want extra markup.

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

这篇关于单独更改jquery-ui自动完成小部件的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！