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

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

Я пытался:


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

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

Спасибо.

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

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

EDIT2: в качестве примера я буду использовать автозаполнение из пользовательского интерфейса jQuery.

Отметьте это, чтобы увидеть страницу автозаполнения 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


javascript jquery autocomplete
person Michel Ayres    schedule 23.03.2011    source источник
comment
Пожалуйста, дайте больше информации или пример источника.   -  person Faraona    schedule 23.03.2011
comment
Привет, @user667776, я разместил две новости как EDITS, надеюсь, теперь со мной все в порядке. спасибо за подсказку, чтобы увеличить мою информацию о моем вопросе.   -  person Michel Ayres    schedule 23.03.2011
comment
PS: Просто чтобы было понятно. ответ находится в КОММЕНТАРИЯХ из принятого ответа.   -  person Michel Ayres    schedule 23.01.2012

Ответы (4)


arrow_upward
23
arrow_downward

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

Скрипка

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;
}
person Zikes    schedule 23.03.2011
comment
привет Zikes, я сначала проверю там. я не люблю приходить сюда, чтобы спросить, прежде чем сначала попробовать Google или документацию. Я не нашел ничего, говорящего о том, какой класс является классом результата. я пробовал .ui-autocomplete-input, как показано в примере, и не работал. я теряюсь здесь банкомат. Благодарю за помощь =) Если я что-то пропустил, дайте мне знать. Еще раз спасибо. - person Michel Ayres; 23.03.2011
comment
@Nymos Разметка ul, следующая за ui-autocomplete-input, — это результаты, которые она генерирует. Ориентируясь на ul.ui-autocomplete.ui-menu, вы должны получить то, что вам нужно. - person Zikes; 23.03.2011
comment
@Zikes, спасибо за быстрый повтор ^.^ но он не работает. я использую $('.ul.ui-autocomplete.ui-menu').css('width', '300px'); и ничего не происходит, я проверяю консоль ошибок ff, и там нет ошибок. - person Michel Ayres; 23.03.2011
comment
@Nymos Удалите первый . из селектора, поскольку он нацелен на элемент ul с классами ui-autocomplete и ui-menu. Строка должна выглядеть как $('ul.ui-autocomplete.ui-menu').css('width', '300px'); - person Zikes; 23.03.2011
comment
@Zikes Еще раз спасибо за помощь так быстро =) я попробовал еще раз, как вы сказали. Мне очень жаль, что я ошибся нубом, забыв точку в ul. =П. Но даже с изменением это не сработало. $('ul.ui-autocomplete.ui-menu').css('width', '300px'); вот как я это пробовал. И магия не работает Q.Q - person Michel Ayres; 23.03.2011
comment
@Nymos Я забыл, что объект результатов не существует при загрузке страницы, и поэтому он не будет найден и нацелен вызовом $('...').css(). На самом деле вам нужно поместить ul.ui-autocomplete.ui-menu{width:300px} в свой файл CSS, чтобы он вступил в силу, когда результаты будут сгенерированы и вставлены на страницу. - person Zikes; 23.03.2011
comment
@Nymos, например, я создал этот jsfiddle: jsfiddle.net/Zikes/TSC3S - person Zikes; 23.03.2011
comment
@Zikes Удивительно, как это работает, я искал в CSS и сходил с ума, пока не вернулся сюда и не увидел ваш комментарий =) Но у меня все еще есть одна проблема. мне нужно это только в одном элементе, а не в каждом элементе. я использовал этот код. if (Id[0] == 0) {$('ul.ui-autocomplete.ui-menu').css('width', '300px');} Любые советы о том, как мне этого добиться? PS: Отмечаю вас как принятый ответ, потому что вы отвечаете на мой вопрос. но если вы можете помочь мне здесь, я буду очень рад =) - person Michel Ayres; 23.03.2011
comment
@Nymos, чтобы было ясно, вы имеете в виду нацеливаться на первый элемент каждый раз или на конкретный элемент, независимо от того, где он появляется в результатах? - person Zikes; 23.03.2011
comment
@Nymos Если вам нужен только первый элемент, я создал jsfiddle, чтобы продемонстрировать, что: jsfiddle .net/Zikes/WxmST/1 - person Zikes; 23.03.2011
comment
Еще раз спасибо Zikes за помощь =) Работает без нареканий. - person Michel Ayres; 24.03.2011

arrow_upward
16
arrow_downward

Я смог настроить, добавив этот 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>
person Chris M    schedule 27.05.2013
comment
+1 Спасибо, что дали нам то, что мы хотим... определение всех классов, используемых для этого элемента управления. Хотя я всегда прибегаю к «проверке» элементов в DOM на наличие таких вещей, параметры меню закрываются всякий раз, когда я загружаю инструменты веб-разработчика !!! - в любом случае еще раз спасибо :) - person Dal; 14.08.2013
comment
Я второй комментарий @Dal. Работает как шарм! хорошая работа. Но как вы получили этот CSS? Ваш собственный индивидуальный стиль? - person now he who must not be named.; 09.10.2013

arrow_upward
3
arrow_downward

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

person Harry B    schedule 15.09.2011

arrow_upward
2
arrow_downward

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

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

$('.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'});
person The Muffin Man    schedule 23.03.2011
comment
или var mystyle = {fontSize: '10px', width: '300px'}; $('.ui-autocomplete-input').css(mystyle); - person Mark Schultheiss; 23.03.2011
comment
Извините, Ник, кажется, я передал неверную информацию. эти коды изменяют мой ввод, а не мой список результатов. Я хочу изменить результат. Но все равно спасибо за фото =) - person Michel Ayres; 23.03.2011
comment
Спасибо за образец тоже Марк, я ценю. Но, как я уже сказал Нику, это не та информация, которую я ищу. все равно спасибо =) - person Michel Ayres; 23.03.2011
comment
Я хотел бы воспользоваться этим временем, чтобы ответить на случайные отрицательные голоса. Откровенно говоря, это глупо и никому не помогает, включая ваше эгоистичное «я». Объясняя, почему вы проголосовали против, вы можете помочь автору улучшить свой ответ или избавить кого-то еще от необходимости пробовать его, поскольку он не сработал. - person The Muffin Man; 14.10.2014