Стиль результата автозаполнения JQuery - PullRequest
Новая
       0

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

18 голосов
/ 23 марта 2011

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

Я пытался: 


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

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

Спасибо.

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

РЕДАКТИРОВАТЬ: Мне нужно изменить 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

Ответы [ 4 ]

20 голосов
/ 23 марта 2011

Информацию о стилях виджета автозаполнения можно найти здесь: 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's <a> element, 
    remove the a at the end to target the li itself 
*/
ul.ui-autocomplete.ui-menu li:first-child a{
    color:blue;
}
14 голосов
/ 28 мая 2013

Мне удалось настроить, добавив этот 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 голосов
/ 15 сентября 2011

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

2 голосов
/ 23 марта 2011

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

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

$('.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'});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...