Прежде чем я начну вопрос, я знаю, что некоторые из вас не будут внимательно читать вопрос и подумают, что я прошу что-то столь же простое, как addClass("custom1") к моему оригинальному #elem, например:
$("#elem1").autocomplete("source1.php").addClass("custom1");
Это не будет делать , потому что я не пытаюсь добавить класс в мой целевой div ... Я пытаюсь добавить его в динамически генерируемый div, который генерирует плагин .
Теперь на мой вопрос:) Заранее спасибо
У меня есть несколько таких автозаполнений:
$("#elem1").autocomplete("source1.php");
$("#elem2").autocomplete("source2.php");
$("#elem3").autocomplete("source3.php");
По умолчанию результаты для каждого возвращаются в отдельном классе div с именем .ac_results, который добавляется до закрытия тела.
<div class="ac_results" style="display: none;">
<ul style="overflow: auto; max-height: 180px;">
//the results here as li's.. they vary with what you typed
</ul>
</div>
<div class="ac_results" style="display: none;">
<ul style="overflow: auto; max-height: 180px;">
//**THESE LIs ARE DIFFERENT FROM THE SET ABOVE**
</ul>
</div>
<div class="ac_results" style="display: none;">
<ul style="overflow: auto; max-height: 180px;">
//**THESE LIs ARE EVEN DIFFERENT FROM THE 2 SETS ABOVE**
</ul>
</div>
</body>
У меня есть собственный класс, хотя для каждого #elem, который мне нужно добавить к элементам div, которые динамически генерирует плагин, чтобы конечный результат выглядел следующим образом: (единственное изменение, которое я добавил custom1 custom2 custom3 классы)
<div class="ac_results custom1" style="display: none;">
<ul style="overflow: auto; max-height: 180px;">
//the results here as li's.. they vary with what you typed
</ul>
</div>
<div class="ac_results custom2" style="display: none;">
<ul style="overflow: auto; max-height: 180px;">
//**THESE LIs ARE DIFFERENT FROM THE SET ABOVE**
</ul>
</div>
<div class="ac_results custom3" style="display: none;">
<ul style="overflow: auto; max-height: 180px;">
//**THESE LIs ARE EVEN DIFFERENT FROM THE 2 SETS ABOVE**
</ul>
</div>
</body>
поэтому мне нужно либо:
- каким-то образом полностью стереть стандартный .ac_results и заменить его моими собственными классами (разные классы для каждого элемента) в каждом объявлении .autocomplete ()
- или оставьте
ac_results и добавьте мои собственные классы (разные для каждого автозаполнения) после того, как он будет обработан
Проблема:
HTML-модуль divs, который генерирует плагин, все выглядит одинаково. Вы не можете заметить разницу, за исключением изучения содержания li.
HTML-дивы генерируются только после , когда вы начинаете вводить автозаполнение для этого #elem, AND , в зависимости от того, что используется последним, добавляется в DOM последним до того, как тело близко.
- Это означает, что я не могу использовать DOM для отображения их .
- При первом рендеринге html DOM не будет иметь
div class="ac_results". Если был использован #elem3, для него добавляется один div class="ac_results". Если после этого был использован #elem1, для него добавляется еще div class="ac_results", поэтому div для elem1 на самом деле находится после div для elem3, поэтому я сказал о невозможности использовать порядок.
Дополнительная информация
Я использую JQuery Autocomplete 1.1. Эта ссылка из выпусков jquery является очень близким файлом, хотя и не идентичным http://plugins.jquery.com/files/issues/jquery.autocomplete.js__0.txt.
Из файла, который у меня есть на моем жестком диске, вот часть кода. Я удалил большинство строк, которые не важны. Наиболее важным является resultsClass: "ac_results", это класс div, который генерируется автоматически.
$.Autocompleter.defaults = {
inputClass: "ac_input",
resultsClass: "ac_results",
loadingClass: "ac_loading",
extraParams: {},
};
Затем resultClass используется позже в функции init (), я показываю это без изменений, на всякий случай не удаляя ни одной строки. В идеале я хочу, чтобы init принял дополнительный класс.
// Create results
function init() {
if (!needsInit)
return;
element = $("<div/>")
.hide()
.addClass(options.resultsClass)
.css("position", "absolute")
.appendTo(document.body);
list = $("<ul/>").appendTo(element).mouseover( function(event) {
if(target(event).nodeName && target(event).nodeName.toUpperCase() == 'LI') {
active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
$(target(event)).addClass(CLASSES.ACTIVE);
}
}).click(function(event) {
$(target(event)).addClass(CLASSES.ACTIVE);
select();
// TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus
input.focus();
return false;
}).mousedown(function() {
config.mouseDownOnSelect = true;
}).mouseup(function() {
config.mouseDownOnSelect = false;
});
if( options.width > 0 )
element.css("width", options.width);
needsInit = false;
}