ширина автозаполнения пользовательского интерфейса jquery не установлена правильно

<p>я реализовал поле автозаполнения пользовательского интерфейса jquery, и вместо ширины текстового поля раскрывающиеся параметры расширяются, чтобы заполнить оставшуюся ширину страницы.</p><p>посмотрите на этот пример, чтобы убедиться в этом: <a href="http://jsbin.com/ojoxa4">http://jsbin.com/ojoxa4</a> </p><p>я попытался установить ширину списка сразу после его создания, вот так:</p><pre><code>$('.ui-autocomplete:last').css('width', $('#currentcontrolid').width() ); </code></pre><p>похоже, это ничего не делает.</p><p>я также попытался установить ширину, используя стили на странице:</p><pre><code>ui-autocomplete { width: 500px; } </code></pre><p>это работает, как ни удивительно, однако это будет означать, что все автозаполнения на странице должны быть одинаковой ширины, что не идеально.</p><p>есть ли способ установить ширину каждого меню индивидуально? или лучше, кто-нибудь может объяснить, почему ширина не работает правильно для меня?</p>

<p>оказывается, проблема в том, что меню расширяется, чтобы заполнить ширину его родительского элемента, который по умолчанию является телом. это можно исправить, добавив в него элемент правильной ширины.</p><p>сначала я добавил <code><div></code> примерно так:</p><pre><code><div id="menu-container" style="position:absolute; width: 500px;"></div> </code></pre><p>абсолютное позиционирование позволяет мне размещать <code><div></code> сразу после ввода, не прерывая поток документов.</p><p>затем, когда я вызываю автозаполнение, в параметрах я указываю аргумент <code>appendto</code>, в результате чего меню добавляется к моему <code><div></code> и, таким образом, наследуется его ширина:</p><pre><code>$('#myinput').autocomplete({ source: {...}, appendto: '#menu-container'}); это решает проблему. однако мне все равно было бы интересно узнать, почему это необходимо, а не работать плагин.

я использую это <strong>раскрывающееся решение</strong>:jquery.ui.autocomplete.prototype._resizemenu = function () { var ul = this.menu.element; ul.outerwidth(this.element.outerwidth()); } это в основном решение <a href="https://stackoverflow.com/a/5931812/346005">@madcapnmckay , но для этого не нужно менять исходный код.

у меня были раскопки в коде автозаполнения, и виновник этот маленький блад_resizemenu: function() { var ul = this.menu.element; ul.outerwidth( math.max( ul.width( "" ).outerwidth(), this.element.outerwidth() ) ); }, я не уверен, что предполагается делать ul.width (""), но ui.width (""). outwidth () всегда возвращает ширину тела, потому что к нему добавляется ul. следовательно, ширина никогда не устанавливается на ширину элементов ....тем не мение. чтобы исправить это просто добавьте это в свой код$element.data("autocomplete").\_resizemenu = function () { var ul = this.menu.element; ul.outerwidth(this.element.outerwidth()); } </code></pre><p>это ошибка?</p><p>правка: в случае, если кто-то хочет увидеть уменьшенный тестовый пример для ошибки <a href="http://jsfiddle.net/nkkzg/1/">здесь</a> это так.</p>

<p>я знаю, что на это уже давно дан ответ, но я думаю, что есть лучшее решение</p><pre><code>$(".autocomplete").autocomplete({ ... open: function() { $("ul.ui-menu").width( $(this).innerwidth() ); ... } ... }); это работало нормально для меня.

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

установите css в открытом событии!$('#id').autocomplete({ minlength: 3, source: function(request, response) { $.ajax({ url: "myurl", datatype: "json", type: 'post', data: { 'q': request.term, 'maxrows': 15 }, success: function(data) { response($.map(data, function(item) { return { label: item.name, } })), } }) }, select: function(event, ui) { $("#id").val(ui.item.label); }, focus: function ( event, ui ){ $form.find('#id').val(ui.item.label); return false; }, open: function(){ $('.ui-autocomplete').css('width', '300px'); // here } }) 

я тоже столкнулся с этой проблемой, но понял, что просто забыл включить ссылку на таблицу стилей jquery.ui.autocomplete.css. вы включили эту таблицу стилей в свой макет/главную страницу?

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override">$("#autocompleteid").autocomplete({ source: "http://myhost/magento/js/jquery/ui/php/ville.php", minlength: 1, open: function(event, ui) { $("#autocompleteid").autocomplete ("widget").css("width","300px"); } });   

ну, эндер. я не знаю, может ли мое решение помочь вам или нет, но с jqueryui remote-with-cache.html это сработало. я просто вставил свойство size в текстовое поле. пожалуйста, смотрите код ниже: <div class="demo"> <div class="ui-widget"> <label for="birds">birds: </label> <input id="birds" size="30"/>   

если вам нравится использовать css, попробуйте это:.ui-widget-content.ui-autocomplete{ width: 350px; }это будет работать на каждом автозаполнении ввода.

если вы не можете установить ширину динамически и ничего не работает, попробуйте включить этоhttp://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882или в связанном листе или в жестком коде и установите параметры здесь.<strong> это сработало для меня после попытки всего остального </strong>

я знаю, что на это уже давно дан ответ, но самый простой способ, который я нахожу, - это использовать идентификатор автозаполнения и установить ширину в 100 пикселей, которую вы бы назвали.$('.ui-autocomplete-input#myid').css('width', '100px');</code> </p><p>после завершения вызова <code>$('#myid').autocomplete(...);</code>. таким образом, вы не привязываете порядок ваших автозаполненных текстовых полей в dom к вашему сценарию.</p>

<p>если вы используете официальное автозаполнение jquery ui (я на 1.8.16) и хотите определить ширину вручную, вы можете сделать это.</p><p>если вы используете сокращенную версию (если нет, то найдите вручную, сопоставив \_resizemenu), найдите ...</p><pre><code>\_resizemenu:function(){var a=this.menu.element;a.outerwidth(math.max(a.width("").outerwidth(),this.element.outerwidth()))} </code></pre><p>... и замените его на (добавьте this.options.width || перед math.max) ...</p><pre><code>\_resizemenu:function(){var a=this.menu.element;a.outerwidth(this.options.width||math.max(a.width("").outerwidth(),this.element.outerwidth()))} </code></pre><p>... теперь вы можете включить значение ширины в функцию .autocomplete ({width: 200}), и jquery выполнит его. если нет, то по умолчанию он будет рассчитан.</p>