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

2021/01/06 09:31 · jquery ·  · 0评论

我正在使用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 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”类的输入。

不要理会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;
}

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

我使用以下内容,它基本上是现成的小部件init函数之一,可能也是您正在寻找的内容。我只添加了两条简单的代码来实现它

$(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进行比较。

请注意,我使用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>

我认为最简单的方法是捕获打开事件,然后在此处设置宽度:

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

由于一次只能激活一个自动完成菜单,因此可以只更改菜单类的宽度。

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

您总是可以在文档中设置实际的CSS规则以匹配该类,

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

如果您事先知道它必须有多宽。

它适用于我使用:

$.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/

若要完全控制自动完成组合框并自动设置宽度,并为其指定一个ID,例如“ a_mycomboID”

改变这条线

input = $( "<input>" )

input = $( "<input id=a_"+select.attr('id')+" style='width:"+select.width()+"px;'>" )

这将自动设置宽度,并为其指定ID,例如a_[the id of the combo box]这将允许您使用ID控制行为。

工作实例

只需使用jQuery CSS方法:

css("width", "300px");

http://api.jquery.com/css/#css2

您可以在添加组合框后追加此内容。

您如何在代码中使用组合框?

只需对jQuery UI代码进行少量更改,就可以为.autocomplete()函数添加宽度。

如果您使用的是官方jQuery UI自动完成功能(我在1.8.16上),并且想手动定义宽度。

如果您使用的是缩小版本(如果没有,请通过匹配_resizeMenu手动查找),找到...

_resizeMenu:function(){var a = this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(), this.element.outerWidth()))}

...并替换为(this.options.width ||在Math.max之前添加)...

_resizeMenu:function(){var a = this.menu.element;a.outerWidth(this.options.width || Math.max(a.width("").outerWidth(), this.element.outerWidth()))}

现在,您可以将宽度值包含到.autocomplete({width:200})函数中,jQuery会接受。如果不是,它将默认进行计算。

$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())
        }

设置最大宽度而不是宽度,因为插件随时会覆盖宽度。

.ui-autocomplete-input
{ 
    max-width: 300px;/* you can set by percentage too */
}
本文地址:http://jquery.askforanswer.com/shifoukeyishezhijqueryzidongwanchengzuhekuangdekuandu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!