【发布时间】：2009-10-13 12:20:15
【问题描述】：
在我开始提问之前，我知道你们中的一些人不会仔细阅读这个问题，并且会认为我要求像 addClass("custom1") 到我原来的 #elem 这样简单的东西，像这样：
$("#elem1").autocomplete("source1.php").addClass("custom1");
这不会这样做，因为我没有尝试将类添加到我的目标 div...我正在尝试将它添加到插件的动态生成的 div生成。
现在回答我的问题 :) 提前致谢
我有几个这样的自动完成功能：
$("#elem1").autocomplete("source1.php");
$("#elem2").autocomplete("source2.php");
$("#elem3").autocomplete("source3.php");
默认情况下，每个结果都会在名为.ac_results 的单独 div 类中返回，该类会在正文关闭之前添加。
<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() 声明中将其替换为我自己的类（每个 elem 的不同类）
- 或保留
ac_results并在渲染后添加我的自定义类（每个自动完成不同）
问题：
插件生成的 html div 看起来都一样。不检查 li 的内容，你是无法分辨的。
-
html div 仅在您开始为该#elem 输入自动完成之后 生成，AND 以最后使用的为准，在正文之前最后添加到 DOM关闭。
- 这意味着我不能使用 DOM 顺序来映射它们。
- 在第一次渲染 html 时，DOM 不会有任何
div class="ac_results"。如果使用了#elem3，则会为其添加一个div class="ac_results"。如果#elem1在之后使用，另一个div class="ac_results"会被添加，所以elem1的div实际上是在elem3的div之后，因此我所说的不能使用订单。
一些额外信息
我正在使用 JQuery 自动完成 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;
}
【问题讨论】：
-
您需要添加的CSS类是否与用于生成结果的
#elem对应？ -
是的，如果我正确理解了您的要求，我想我会这样做。让我澄清一下 - 当自动完成完成时（即用户尚未搜索/键入），带有匹配项的
<div>结果将附加到正文的末尾。要求是能够向生成的<div>添加一个 CSS 类，以便以某种方式识别它。这是正确的吗？ -
您能否更改 js 源代码，以便为您调用的每个 ac 准备好元素并使其在文档准备就绪时不可见？
-
自动完成的结果如何被放入
<ul>？我们可以看看代码吗？ -
我是说你换插件！
标签： javascript jquery plugins autocomplete customization