Несколько экземпляров автозаполнения jQuery на одной странице - PullRequest
Новая
       16

Несколько экземпляров автозаполнения jQuery на одной странице

8 голосов
/ 28 января 2010

Я бы хотел по-разному стилизовать каждый экземпляр плагина автозаполнения jQuery на каждой странице. За исключением того, что я не могу понять, как установить разные стили для каждого экземпляра. Я не могу обернуть стили ac_ * внутри div, чтобы идентифицировать их из CSS. Каждое изменение, которое я делаю, влияет на оба. Есть идеи?

Спасибо.

Ответы [ 9 ]

15 голосов
/ 01 ноября 2011

Используйте параметр appendTo, чтобы поместить список автозаполнения в какой-либо пользовательский контейнер вместо body. Тогда вы можете стилизовать его. Пример:

JS: 

$('#suggestions').autocomplete({source: get_suggestions, appendTo: '#my-suggestions'})

HTML: 

<input type="text" id="suggestions">
<div id="my-suggestions"></div>

CSS: 

#my-suggestions {
  position: absolute;
}

#my-suggestions .ui-autocomplete {
   foo: bar;
}
5 голосов
/ 08 октября 2010

http://api.jqueryui.com/autocomplete/#method-widget

добавить что-то вроде этого: 

selector.autocomplete( "widget" ).addClass('yourclass');
2 голосов
/ 05 августа 2011

решение очень просто: 

$( "#target-input" ).autocomplete({
    open:function( event, ui ) {
      $('.ui-autocomplete.ui-menu').addClass('yourClass');
    },
    close:function( event, ui ) {
      $('.ui-autocomplete.ui-menu').removeClass('yourClass');
    }
});

Вы можете поместить любой код в класс .yourClass

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

Я только что обнаружил, что вы можете легко получить UL-контейнер, если вы используете jQuery UI 1.8. Чтобы получить контейнер пользовательского интерфейса в версии 1.8, вы просто добавляете следующее в ваш метод open: 

var $myAcInput = $("#my-acomplete-input");

...
$myAcInput.autocomplete({
  open : function(event, ui) {
    // Grab the widget that just opened:
    var $resultsContainer = $formsInput.autocomplete("widget");
    // Add a custom rendering class and use tht to style your subelements
    $resultsContainer.addClass("my-custom-results-container-class");              
    // Position the container wherever you want:
    $resultsContainer.position({at: "center bottom", 
                                my:"center top", 
                                collision: "fit", 
                                of: "#my-acomplete-input"});            
  }
  source :  etc etc etc
});
1 голос
/ 11 февраля 2011

Вы можете переписать метод _renderMenu. Возьмем http://jqueryui.com/demos/autocomplete/#combobox в качестве примера. 

selector.data("autocomplete")._renderMenu=function(ul, items){
//do something here..
}
0 голосов
/ 04 августа 2013

Когда у меня возникла эта проблема, я обнаружил, что jquery-ui дает каждому экземпляру уникальный идентификатор, который является # ui-id-1, # ui-id-2, где первое автозаполнение в dom получает номер 1,второй номер 2 и тд.Поэтому, если порядок автозаполнения известен, к разным идентификаторам можно применять разные стили.

0 голосов
/ 24 сентября 2012

В более новых версиях было добавлено «appendTo», позволяющее выбрать родительский элемент для списка предложений. Вы можете создать разных родителей (со входом или классом) для своих списков.

0 голосов
/ 28 июля 2010

Искал что-то еще, когда я наткнулся на этот пост ... Мне удалось сделать это, отлавливая следующие события автозаполнения и добавляя свой собственный класс во внешний, который содержит выходные данные автозаполнения. Затем используйте CSS для форматирования элементов по мере необходимости. Надеюсь, это кому-нибудь поможет. 

$input.autocomplete({
            focus : function(event, ui) {
              $(".forms-search-result").parents("ul").addClass("myClass");
              return false;
            },
            open : function(event, ui) {
              $(".forms-search-result").parents("ul").addClass("myClass");
            },

Пример css: 

.myClass a.ui-corner-all { font-weight:bold; }

Кроме того, как часть моих результатов JSON, я просто возвращаю (из моего JAVA AJAX Action) оболочку HTML со встроенным в нее результатом как часть фактического «результата» JSON. Таким образом, я могу создать сложный HTML вокруг каждого результата, а затем использовать вышеописанный метод для форматирования их так, как я хочу.

0 голосов
/ 28 января 2010

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

<div class="differentStyle">
    <input type="text" class="autocomplete">
</div>

Когда результаты возвращаются, на страницу добавляется новый элемент div для отображения результатов, но не внутри вашего подразделения "differentStyle". Это просто добавляется в конец DOM. Например: 

<div class="differentStyle">
    <input type="text" class="autocomplete">
</div>

...
<div class="ac_results">I get added by jQuery Autocomplete!</div>
</body>

Читая документацию, я бы сказал, что это сделает невозможным переопределение стиля для двух полей автозаполнения на одной странице:

http://docs.jquery.com/Plugins/Autocomplete

...