Question

在我开始提问之前，我知道你们中的一些人不会仔细阅读这个问题，并且会认为我要求的是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并将其替换为我自己的类（每个elem的不同类）.autocomplete（）声明

或保留ac_results并在呈现后添加我的自定义类（每个自动填充不同）

问题：

html divs插件生成的所有外观都一样。你无法区分检查李的内容。

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 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: {}, };

稍后在函数init（）中使用resultClass，我将完整地显示它而不删除任何行以防万一。 理想情况下，我想做的是让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; }

Answer 1

查看自动完成插件，传入的选项将使用$.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
};

由于用于结果<div>的CSS类在默认值内部不受保护，我们所需要做的就是传入我们自己的CSS类以用于结果<div>。类似于以下内容

var id = $("#elem1").attr('id');   
$("#elem1")
    .autocomplete("source1.php", {resultsClass: "ac_results " +id});

您只需要为每个自动完成设置在resultsClass CSS类中使用的相应ID。

自动完成自定义它 - Jquery

1 个答案: