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

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

спасибо.

8
autocomplete jquery jquery-autocomplete

9 ответов

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

<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

0

использовать 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;
}
15

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

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

selector.autocomplete( "widget" ).addClass('yourclass');
5

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

$( "#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

Я только что обнаружил, что вы можете легко захватить контейнер 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

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

selector.data("autocomplete")._renderMenu=function(ul, items){
//do something here..
}
1

искал что-то еще, когда я наткнулся на этот пост... Мне удалось сделать это, захватив следующие события автозаполнения и добавив свой собственный класс во внешний, который содержит вывод автозаполнения. Затем используйте 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) оболочку HTML с результатом, встроенным в нее как часть фактического формате JSON "результат". Таким образом, я могу создать сложный HTML вокруг каждого результата, а затем использовать вышеуказанный метод для форматирования их так, как я хочу.

0

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

0

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

0