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

Question

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

спасибо.

Answer 1

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

<div class="differentStyle"> 
    <input type="text" class="autocomplete"> 
</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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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 
}); 

Answer 6

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

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

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

Answer 7

Используйте опцию 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; 
} 

Answer 8

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

Answer 9

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