是否可以设置jQuery自动完成组合框的宽度？

Question

我在jQuery UI网站上使用这个jQuery UI组合框自动完成控件开箱即用:

我的问题是我在页面上有多个组合框,我希望它们每个都有不同的宽度.

我可以通过添加这个CSS来改变所有这些的宽度:

 .ui-autocomplete-input
 {
     width: 300px;
 }

但我无法找到改变其中一个宽度的方法.

Answer 1

一个简单的

$('.ui-autocomplete-input').css('width','300px')

工作(我在Firebug的链接页面上尝试过)来更改页面上的第一个.

你可以这样做:

$($('.ui-autocomplete-input')[N]).css('width','300px') #N is the nth box on the page

改变第N个.

要通过特征找到特定的特定元素,您可以通过多种方式实现.

通过第一个"选项"(在此示例中为"asp")找到它:

$('.ui-autocomplete-input').map(function(){if ($(this).parent().children()[1].options[0].text == 'asp'){ $(this).css('width','300px'); return false;} })

通过它的"标签"找到它:

$('.ui-autocomplete-input').map(function(){if ($($(this).parent().children()[0]).text() == "Your preferred programming language: "){ $(this).css('width','300px'); return false;}})

等等...

如果你知道如何找到你的组合框,我会更新.

编辑评论

哦,这使它更容易.从您链接到的示例源,HTML已经包含在div中:

<div class="ui-widget" id="uniqueID">
    <label>Your preferred programming language: </label>
    <select>
        <option value="a">asp</option>
        <option value="c">c</option>
        <option value="cpp">c++</option>
        <option value="cf">coldfusion</option>
        <option value="g">groovy</option>
        <option value="h">haskell</option>
        <option value="j">java</option>
        <option value="js">javascript</option>
        <option value="p1">perl</option>
        <option value="p2">php</option>
        <option value="p3">python</option>
        <option value="r">ruby</option>
        <option value="s">scala</option>
    </select>
</div>

我会给那个div一个唯一的id然后:

$('#uniqueID > input.ui-autocomplete-input').css('width', '300px')

这将选择div的子元素,这些元素是具有"ui-autocomplete-input"类的输入.

Answer 2

请注意,我使用http://jqueryui.com/demos/autocomplete/#combobox中的代码.

在该_create方法中,添加以下行:

    _create: function() {
        var self = this;
        var eleCSS = this.element[0].className; //This line

然后滚动一点,找到这个:

    .addClass("ui-widget ui-widget-content ui-corner-left");

并将其更改为:

    .addClass("ui-widget ui-widget-content ui-corner-left "+ eleCSS);

HTML

<select class="combo-1 autocomplete">
    <option value="a">asp</option>
    <option value="c">c</option>
    <option value="cpp">c++</option>
    <option value="cf">coldfusion</option>
    <option value="g">groovy</option>
    <option value="h">haskell</option>
    <option value="j">java</option>
</select>

现在您可以将CSS应用于combo-1:

<script>
    $(function() {
        $('.autocomplete').combobox();
        $('.combo-1').css('width', '50px');
    });
</script>

Answer 3

不要打扰JavaScript.您可以像在原先尝试的那样在CSS中轻松完成此操作.您需要做的就是为每个选择器添加一个唯一的选择器.例如:

HTML看起来像这样

<div class="title">
    <label for="title">Title: </label>
    <input id="title">
</div>
<div class="tags">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

CSS看起来像这样

.ui-autocomplete-input
{ 
    width: 120px;
}
.title .ui-autocomplete-input
{ 
    width: 200px;
}
.tags .ui-autocomplete-input
{ 
    width: 600px;
}

Answer 4

JavaScript的

var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.addClass('myautocomplete');

CSS

.myautocomplete{width:300px!important;}

你无法width直接设置,因为它会被覆盖.但你可以min-width直接设置.

var $myinput = $('#myinput').autocomplete({source: ['ABC', 'BCD', 'CDE']})
$myinput.data('autocomplete').menu.element.css('min-width', '300px');

Answer 5

我使用以下基本上是一个现成的小部件初始化函数,也可能是你正在寻找的.我只添加了两条简单的线来实现它

$(function(){
$.widget( "ui.combobox", {
    _create: function() {
        var self = this,
        select = this.element.hide(),
        selected = select.children( ":selected" ),
        value = selected.val() ? selected.text() : "";
        var getwid = this.element.width(); // <<<<<<<<<<<< HERE
        var input = this.input = blah blah
        .insertAfter( select )
        .val( value )
        .autocomplete({
            delay: 0,
            minLength: 0,
            source: function( request, response ) {
                blah blah
            },
            blah blah
        })
        //?? .addClass( "ui-widget ui-widget-content ui-corner-left" );
        input.width(getwid); // <<<<<<<<<<<< AND HERE
        input.data( "autocomplete" )._renderItem = function( ul, item ) {
            blah blah

注意行var getwid等和input.width(getwid);

我设法复制选择对象的宽度并将其应用于组合框,因为它们(自动完成组合框)被创建以覆盖选择输入.

希望有所帮助.问候.

PS:我相信如果你真的只想应用固定宽度而不是引用底层选择列表,那么忽略我添加的第一行并更改第二行以将预定义数组与"this"id进行比较.