JQuery автозаполнение стилей - PullRequest
Новая
       2

JQuery автозаполнение стилей

9 голосов
/ 16 февраля 2011

При стилизации плагина jQuery для автозаполнения я получаю следующий HTML-код, встроенный в мою страницу: 

<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all" role="listbox" aria-activedescendant="ui-active-menuitem" style="z-index: 1; top: 0px; left: 0px; display: none; "></ul>

Как я могу отключить создание стилей с помощью HTML и сохранить его с помощью CSS? Я не думаю, что мои CSS-файлы перезаписывают этот стиль.

Любая помощь будет

Ответы [ 2 ]

9 голосов
/ 16 февраля 2011

jQuery autocomplete должен установить несколько встроенных стилей для размещения выпадающего списка под текстовым полем и одинакового размера.

Он не устанавливает ничего другого, поэтому вам остается только предоставить визуальный стильоб этом, устанавливая стили тех классов, которые добавляются к нему (т. е. ui-autocomplete).

Советы

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

Необходимо изменить позиционирование

Если вам нужно переопределить позиционирование и размеры этого элемента, вы всегда можетеустановите ваши стили как !important. 

ul.ui-autocomplete
{
    position: absolute;
    left: 100px!important;
    top: 0!important;
    ...
}

Дополнительное редактирование

Установка margin-top ничего не делает, так как она вычисляет позицию каждый раз, когда отображает раскрывающийся список.Но вы можете попробовать установить это: 

.ui-autocomplete
{
    border-top:5px solid transparent!important;
}

Это действительно помогает.

7 голосов
/ 10 февраля 2012

Это можно сделать, внеся некоторые изменения в метод "автозаполнения" open.

рассмотрим этот пример: 

$('#search_text_box').autocomplete({
        source: "<?= $this->baseUrl('items/autocomplete');?>",
        minLength: 2,
        search: function(){
            //$ulForResults.empty();
        },
        'open': function(e, ui) {
            $('.ui-autocomplete').css('top', $("ul.ui-autocomplete").cssUnit('top')[0] + 4);
            $('.ui-autocomplete').css('left', $("ul.ui-autocomplete").cssUnit('left')[0] - 2);
            $('.ui-autocomplete').append("<div id='autofill_results'><span>2,000</span> results found, showing <span>10</span></div>");
        }
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" ).data( "item.autocomplete", item ).append( "<a>" + item.name + "</a>" ).appendTo( ul );
    };

Таким образом, изменив способ и место появления автозаполнения,'Ul', который показывает информацию автозаполнения, имеет класс 'ui-autocomplete', вы можете манипулировать его css в этой функции, чтобы показать выпадающий список, как вы хотите.

...