Тип результата автозаполнения JQuery

Я пытаюсь изменить стиль из моего автозаполнения.

Я пробовал:


// Only change the inputs
$('.ui-autocomplete-input').css('fontSize', '10px');
$('.ui-autocomplete-input').css('width','300px');

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

Спасибо.

Использование: jQuery-UI Автозаполнение

EDIT: Мне нужно изменить css из моего результата, который исходит от моего JSON, а не от ввода. Код, который вы отправили, изменяет только вход, а не результат. Вот почему я попросил класс, используемый в списке результатов (по крайней мере, я считаю, что это список). Я пытался использовать fb из ff и не мог его найти. Еще раз спасибо за терпение.

EDIT2: Я буду использовать автозаполнение из jQuery UI в качестве примера.

Проверьте это, чтобы просмотреть страницу автозаполнения jQuery-UI

После того, как я напечатаю "Ja" в текстовом поле из примера на первой странице, Java и JavaScript появятся в виде результатов в маленьком поле ниже текстового поля.

Эта маленькая коробка - это то, что я хочу изменить CSS. Мой код в приведенном выше примере меняет только мой текстовый CSS (который мне вообще не нужен).

Я не знаю, ясно ли я сейчас. Надеюсь, да, но если нет, сообщите мне; Я постараюсь приложить больше усилий, чтобы показать свою проблему.

Класс для UL, который будет содержать элементы результата, - это то, что мне нужно.

РЕШЕНИЕ Как сказал Зикс в своем комментарии к принятому ответу, вот решение. Вам просто нужно поместить ul.ui-autocomplete.ui-menu{width:300px} в ваш файл CSS.

Это сделает все поле результатов css width:300px (например, образец).

Я забыл, что объект результатов не существует при загрузке страницы, и поэтому не будет найден и настроен на вызов $('...').css(). Вам действительно нужно поместить ul.ui-autocomplete.ui-menu{width:300px} в ваш CSS файл, чтобы он вступил в силу, когда результаты были сгенерированы и вставлены на страницу.
- Zikes

Ответ 1

Информацию о стилизации виджета Autocomplete можно найти здесь: http://docs.jquery.com/UI/Autocomplete#theming

Fiddle

HTML

<input type="text" id="auto">

JQuery

$('#auto').autocomplete({'source':
    ['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});

CSS

ul.ui-autocomplete.ui-menu{width:400px}

/* 
    targets the first result <a> element, 
    remove the a at the end to target the li itself 
*/
ul.ui-autocomplete.ui-menu li:first-child a{
    color:blue;
}

Ответ 2

Мне удалось настроить, добавив этот css в <head> документа (над автозаполнением javascript).

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

<style type="text/css">
 /* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }   

/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
</style>

Ответ 3

Если вы используете официальный jQuery ui autocomplete (я на 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 будет ее соблюдать. Если нет, по умолчанию будет вычисляться.

Ответ 4

Просто, чтобы вы знали, что у вас есть два варианта оптимизации кода:

Вместо этого:

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

Вы можете сделать это:

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

Или даже лучше вы должны это сделать:

$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});