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

问题描述

我使用这个jQuery UI组合框自动完成控制开箱即用的jQuery UI网站：

我的问题是，我在一个网页上有多个组合框，我希望他们有不同的宽度。

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

  .ui-autocomplete- input 
 {
 width：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 .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;}}）
  

等...

$ b b

如果您想了解如何查找您的组合框，我会进行更新。

编辑评论 >

oo，这使它更容易。从您链接到的示例源，HTML已经包装在一个div中：

 < div class =ui-widget id =uniqueID> 
< label>您的首选编程语言：< / 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然后：

$ b b

  $（'＃uniqueID> input.ui-autocomplete-input'）css（'width'，'300px'）
  

使用类ui-autocomplete-input选择您的div的子元素。

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屋！