Можно ли установить ширину поля со списком автозаполнения jQuery?

Простой

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

работает (я пробовал на связанной странице с Firebug), чтобы изменить первый один на странице.

Вы можете сделать что-то вроде:

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

Чтобы изменить N-й.

Чтобы найти конкретную по характеристике, можно было сделать это многими способами.

Найдите его по первому «варианту» (в данном примере «аспид»):

$('.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 уникальный идентификатор:

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

Я использую следующее, которое в основном является одной из легко доступных функций инициализации виджета и может быть тем, что вы ищете. Я добавил всего две простые строки, чтобы добиться этого

$(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: я считаю, что если вы действительно просто хотите применить фиксированную ширину, не ссылаясь на базовый список выбора, тогда проигнорируйте первую строку, которую я добавил, и измените вторую, чтобы сравнить предопределенный массив с «этим» идентификатором.

Обратите внимание, что я использую код из http://jqueryui.com/demos/autocomplete/#combobox.

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

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

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

Я думаю, что самый простой способ сделать это — захватить событие open, а затем установить там ширину:

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

Спасибо, Майкл Саймонс https://info.michael-simons.eu/2013/05/02/how-to-fix-jquery-uis-autocomplete-width/

Чтобы иметь полный контроль над полем со списком автозаполнения, автоматически устанавливать ширину и присваивать ему идентификатор, например «a_mycomboID»,

изменить эту строку

input = $( "<input>" )

To

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

Это автоматически установит ширину и присвоит ему идентификатор, например a_[the id of the combo box]. Это позволит вам контролировать поведение с помощью идентификатора.

рабочий пример

Просто используйте метод jQuery CSS:

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

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

Вы можете добавить это после добавления поля со списком.

Как вы используете поле со списком в своем коде?

С небольшим изменением в коде jQuery UI вы можете добавить ширину в функцию .autocomplete(). .

Если вы используете официальное автозаполнение пользовательского интерфейса jQuery (у меня 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 */
}