分别更改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>并将不同的自动完成框宽度与列表中的值匹配也不起作用,因为这些值是动态生成的.

有任何想法吗？

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

查看演示.

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