是否可以设置 jQuery 自动完成组合框的宽度? [英] Is it possible to set the width of a jQuery autocomplete combobox?

问题描述

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

我的问题是我在一个页面上有多个组合框，我希望每个组合框的宽度不同.

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

 .ui-autocomplete-input{宽度:300px；}

但我想不出一种方法来改变其中一个的宽度.

解决方案

一个简单的

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

作品(我在链接页面上尝试使用 Firebug)到更改页面上的第一个.

您可以执行以下操作:

$($('.ui-autocomplete-input')[N]).css('width','300px') #N是页面的第n个框

更改第 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() =="您首选的编程语言:"){ $(this).css('width','300px'); return false;}})

等等...

如果您知道如何找到组合框，我会更新.

编辑评论

oo，这让它变得更容易.从您链接到的示例源中，HTML 已经包含在一个 div 中:

<label>您的首选编程语言:</label><选择><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></选择>

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

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

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

I am using this jQuery UI combobox autocomplete control out of the box off the jQuery UI website:

My issue is that I have multiple comboboxes on a page, and I want them to have different widths for each one.

I can change the width for ALL of them by adding this CSS:

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

but I can't figure out a way to change the width on just one of them.

解决方案

A simple

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

works (I tried it on the linked page with Firebug) to change the first one on the page.

You can do something like:

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

To change the Nth one.

To find a specific one by a characteristic, you could do it in many ways.

Find it by the first "option" (in this example "asp"):

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

Find it by its "label":

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

etc...

I'll update if you have an idea of how you want to find your combobox.

EDIT FOR COMMENT

oo, that makes it even easier. From the example source you linked to, the HTML is already wrapped in a 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>

I would give that div a unique id then:

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

That selects child elements of your div that are inputs with a class of "ui-autocomplete-input".

这篇关于是否可以设置 jQuery 自动完成组合框的宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！