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

Question

我正在使用从jQuery UI网站上获取的jQuery UI组合框自动完成控件：

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

我可以通过添加以下CSS来更改它们所有的宽度：

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

但我找不到一种方法只改变其中一个的宽度。

- leora

---

“@oo 但我无法想出一个只更改其中一个宽度的方法”，您要更改哪个CSS，每隔第二个、第三个还是有任何模式吗？您能否提供更多信息、更多HTML或任何有助于您获得答案的内容？ - ant

能否将下拉框包装在 div 或 span 中？这样你就可以使用 #foo .ui-autocomplete-input{ width:300px; } 了吗？否则我同意 c0mrade 的观点。 - Christopher Altman

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个。

通过特征找到特定的一个，你可以用许多方法做到这一点。

通过第一个"option" (在本例中为"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 中 class 为 "ui-autocomplete-input" 的 input 子元素。

- Mark

---

@Mark - 你走在正确的道路上。我不想通过索引来做，因为它似乎有点不稳定和难以理解，因为它是一个随机索引，如果我添加一个新的组合框，它可能会出错。假设我在每个组合框周围放置一个div。基于外部div的类名，我该如何选择它呢？ - leora

@oo，看一下新增的内容，使用一个具有唯一 id 的外部 div（实际上使用链接示例中已有的）会使它变得简单得多。 - Mark

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>

现在你可以为combo-1应用CSS：

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

- Puaka

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

- Banzor

Answer 4

我使用了以下函数，它基本上是可用的小部件初始化函数之一，可能也是您要寻找的内容。我只添加了两行简单的代码来实现它。

$(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);。

我已经推出了将选择对象的宽度复制并应用于组合框的方法，因为当自动完成组合框被创建时，它们会覆盖选择输入框。

希望这能有所帮助。祝好。

附注：如果您只想应用固定宽度而不是引用基础选择列表，则可以忽略我添加的第一行，并将第二行改为将预定义数组与“this” ID进行比较。

- Wombat_RW

Answer 5

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

- Joyce Babu

Answer 6

我认为最简单的方法是捕获打开事件，然后在那里设置宽度：

我认为最简单的方法是捕获打开事件，然后在那里设置宽度：

$("#autocompleteInput").bind("autocompleteopen", function(event, ui) {
  var width = 300;
  $(".ui-autocomplete.ui-menu").width(300);
});

由于一次只能有一个自动完成菜单处于活动状态，因此只需更改菜单类的宽度即可。

- Charles Chan

Answer 7

$.widget( "custom.myAutoComplete", $.ui.autocomplete, {
    options: {
        resultClass: "leanSolutions",
    },

    _create: function()
    {
        this._super();
    },`

    _renderMenu: function(ul, items)
    {
        var that = this;
        ul.addClass(that.options.resultClass);

        $.each( items, function( index, item ) {
            that._renderItemData( ul, item );
        });
    }
});

现在你可以这样做：

$('.myAutoCompleteBox').myAutoComplete(
 data: ...
 etc: ...
 resultClass: 'myAutoCompleteBoxResultList'
);

然后您可以对其进行样式设置

.myAutoCompleteBoxResultList{   
    width: 8000px;
}

- cinatic

Answer 8

你可以在文档中设置一个实际的CSS规则来匹配这个类。

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

如果您事先知道它需要多宽，可以这样做。

- Geoff

---

@Geoff - 我尝试过了，但是如上所述，问题在于它会影响所有COMBOBOX自动完成的宽度（而不仅仅是其中一个）。 - leora

有道理，但你可以在样式规则上创造性地添加一个带有ID的容器来匹配。诚然，jQuery选择器规则更加灵活，既然你已经依赖它，使用它进行CSS操作也没有什么坏处。 - Geoff

Answer 9

我使用以下代码可以正常工作：

$.extend($.ui.autocomplete.prototype.options, {
  open: function(event, ui) {
    $(this).autocomplete("widget").css({
            "width": ($(this).outerWidth() + "px")
        });
    }
});

感谢Michael Simons https://info.michael-simons.eu/2013/05/02/how-to-fix-jquery-uis-autocomplete-width/

- Cristian Rennella

Answer 10

$input.data('ui-autocomplete')._resizeMenu = function () {
    var ul = this.menu.element;
    ul.outerWidth(this.element.outerWidth()); 
 }

如果您在自己的小部件内进行操作，可以这样做：

        // Fix width of the menu
        this.input = <your dom element where you bind autocomplete>;
        this.input.data("ui-autocomplete")._resizeMenu = function () {
            var ul = this.menu.element;
            ul.outerWidth(this.element.outerWidth())
        }

- Premchandra Singh