Можно ли установить ширину выпадающего списка автозаполнения jQuery?

Question

Я использую это управление автозаполнением в поле со списком jQuery UI из коробки с веб-сайта jQuery UI:

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

Я могу изменить ширину для ВСЕХ из них, добавив этот CSS:

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

но я не могу найти способ изменить ширину только на одном из них.

Answer 1

Для полного контроля над списком автозаполнения и установите ширину автоматически и присвойте ей идентификатор типа «a_mycomboID»

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

input = $( "<input>" )

К

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

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

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

Answer 2

С небольшим изменением кода 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 выполнит его. Если нет, то по умолчанию он будет рассчитан.

Answer 3

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

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

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

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

Как вы используете комбинированный список в вашем коде?