Javascript 自动完成定制-Jquery

在我开始提问之前，我知道你们中的一些人不会仔细阅读这个问题，他们会认为我要求的是一些简单的东西，比如将

addClass（“custom1”）

添加到我的原始

#elem

，如下所示：

$("#elem1").autocomplete("source1.php").addClass("custom1");

$("#elem1").autocomplete("source1.php"); 
$("#elem2").autocomplete("source2.php");
$("#elem3").autocomplete("source3.php");

这样做不行，因为我没有尝试将该类添加到我的目标div中。。。我试图将它添加到插件生成的动态生成的div中

现在回答我的问题：）提前谢谢

我有几个这样的自动完成：

$("#elem1").autocomplete("source1.php").addClass("custom1");

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

因此，我需要：

• 以某种方式完全删除默认的.ac_结果，并在每个.autocomplete（）声明中用我自己的类（每个元素的不同类）替换它
• 或者保留

  ac_结果

  ，并在渲染后添加我的自定义类（每个自动完成不同）

问题是：

• 插件生成的html div看起来都一样。除了检查李的内容外，你无法区分两者之间的区别

• html div只有在您开始为该#元素输入autocomplete后才生成，和最后使用的，在主体关闭前最后添加到DOM中

     <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>
  

  • 这意味着我不能使用DOM顺序映射它们
  • 在第一次呈现html时，DOM将不会有任何

    div class=“ac_results”

    。如果使用了

    #elem3

    ，则会为其添加一个

    div class=“ac#u results”

    。如果在之后使用

    #elem1

    ，则会为它添加另一个

    div class=“ac_results”

    ，因此

    elem1

    的div实际上在

    elem3

    的div之后，因此我所说的不能使用order

一些额外信息

我正在使用jqueryautocomplete1.1。来自jquery问题的这个链接是一个非常接近的文件，尽管不完全相同

从文件中，我在我的硬盘上，这里有一些代码。我删除了大部分不重要的行。最重要的是

resultclass:“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;
} 

//创建结果
函数init（）{
如果（！needsInit）
返回；
元素=$（“”）
.hide（）
.addClass（options.resultClass）
.css（“位置”、“绝对”）
.附录（文件正文）；
list=$（“
”）.appendTo（元素）.mouseover（函数（事件）{
if（target（event）.nodeName&&target（event）.nodeName.toUpperCase（）=='LI'）{
active=$（“li”，list）.removeClass（CLASSES.active）.index（target（event））；
$（target（event））.addClass（CLASSES.ACTIVE）；
}
})。单击（功能（事件）{
$（target（event））.addClass（CLASSES.ACTIVE）；
选择（）；
//TODO提供避免在选择后再次设置焦点的选项？用于清除焦点
input.focus（）；
返回false；
}).mousedown（函数（）{
config.mouseDownOnSelect=true；
}).mouseup（函数（）{
config.mouseDownOnSelect=false；
});
如果（options.width>0）
css（“宽度”，选项.width）；
needsInit=false；
} 

查看autocomplete插件，使用

$.extend将传入的选项与默认值合并。这是密码

autocomplete: function(urlOrData, options) {
        var isUrl = typeof urlOrData == "string";
        options = $.extend({}, $.Autocompleter.defaults, {
            url: isUrl ? urlOrData : null,
            data: isUrl ? null : urlOrData,
            delay: isUrl ? $.Autocompleter.defaults.delay : 10,
            max: options && !options.scroll ? 10 : 150
        }, options);

这里是默认值

$.Autocompleter.defaults = {
    inputClass: "ac_input",
    resultsClass: "ac_results",
    loadingClass: "ac_loading",
    minChars: 1,
    delay: 400,
    matchCase: false,
    matchSubset: true,
    matchContains: false,
    cacheLength: 10,
    max: 100,
    mustMatch: false,
    extraParams: {},
    selectFirst: true,
    formatItem: function(row) { return row[0]; },
    formatMatch: null,
    autoFill: false,
    width: 0,
    multiple: false,
    multipleSeparator: ", ",
    highlight: function(value, term) {
        return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>");
    },
    scroll: true,
    scrollHeight: 180
};

您只需为每个自动完成设置在ResultClass CSS类中使用的适当id。
您需要添加的CSS类是否与用于生成结果的
#elem
相对应？是的，如果我正确理解了您的要求，我想是的。让我澄清一下-当自动完成完成时（即，用户尚未搜索/键入），正文末尾会追加一个带有匹配项的
结果。要求能够将CSS类添加到生成的
中，以便以某种方式识别它。这是否正确？您是否可以更改js源代码，以便在文档准备就绪时为您调用的每个ac准备元素并使其不可见？自动完成的结果如何放入
？我们能看看代码吗？我是说你要改变插件！关键是传入的
选项
对象最后添加到
$.extend
中，这意味着此对象中指定的属性将覆盖以前对象中的属性（即
$.Autocompleter.defaults
对象）