Отключите element.style в jQuery UI Автозаполнение - PullRequest
Новая
       33

Отключите element.style в jQuery UI Автозаполнение

2 голосов
/ 22 февраля 2011

Я хочу настроить CSS результатов автозаполнения пользовательского интерфейса jquery. Проблема заключается в том, что плагин автоматически генерирует динамические стили элементов (например, значения ширины, верха, левого, правого) каждый раз, когда в поле ввода вводится запрос.

Мне не нужна стилизация элементов, и я не уверен, как это изменить в коде плагина. Есть идеи? В качестве альтернативы, возможно, есть способ переопределить стили элементов с помощью другого CSS, не изменяя код плагина. Такие идеи также приветствуются.

Ответы [ 2 ]

1 голос
/ 11 августа 2011

Вот мой подход.Я создал другой элемент и «спрятал» результаты автозаполнения.Чтобы вызвать обычные события при автозаполнении, вы можете задать для контейнера автозаполнения-результатов ширину и высоту 0 с плавающей точкой (не уверен, если это необходимо) и установить переполнение скрытым.Когда появится контейнер отбрасываемых элементов, я очищаю свой контейнер результатов.Когда элемент отображается, функция _renderItem, я добавляю его в мой контейнер результатов. 

$('#faq-search').autocomplete({'source': questions}, {
    matchContains: true,
    appendTo: "#faq-search-results .autocomplete-results",
    change: function(e, ui){
    },
    close: function(e, ui){
    },
    search: function(e, ui){
        $('#faq-search-results > ul').empty();
    },
    select: function(e, ui){
        location.assign(ui.item.link);
    }
}).data( "autocomplete" )._renderItem = function( ul, item ) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append('<a href="'+ item.link +'">'+ item.value +'</a>')
        .appendTo($('#faq-search-results > ul'));
};
0 голосов
/ 01 августа 2011

окно результатов, которое генерирует плагин, полностью тематически. К каждому элементу прикреплено имя класса, как показано ниже 

 <input class="ui-autocomplete-input"/>
<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 1</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 2</a>
  </li>
  <li class="ui-menu-item">
    <a class="ui-corner-all">item 3</a>
  </li>
</ul>

Все, что вам нужно сделать, это создать таблицу стилей и определить свойства каждого класса.

проверьте вкладку "Темы" по этой ссылке http://jqueryui.com/demos/autocomplete/

...