Автозаполнение настроить его - Jquery

Прежде чем я начну вопрос, я знаю, что некоторые из вас не будут внимательно читать вопрос и подумают, что я прошу что-то столь же простое, как 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, и, в зависимости от того , что будет использовано последним, будет добавлено в 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;
} 
класс CSS, который вам нужно добавить, соответствует тому, #elemкоторый используется для генерации результатов?
Russ Cam 13.10.2009 12:30:48
Да, думаю, если я правильно понял ваше требование. Позвольте мне уточнить - когда завершается автозаполнение (то есть пользователь не выполняет поиск / ввод текста), <div>результат с соответствиями добавляется в конец тела. требование заключается в том, чтобы иметь возможность добавить класс CSS к сгенерированному <div>, чтобы каким-то образом его идентифицировать. Это правильно?
Russ Cam 13.10.2009 12:41:22
Не могли бы вы изменить исходный код js, чтобы элементы были подготовлены и стали невидимыми в документе, готовом к каждому вызову?
markus 13.10.2009 12:42:14
как результаты автозаполнения помещаются в <ul>? Можем ли мы увидеть код для этого?
Russ Cam 13.10.2009 12:50:27
Я имел в виду, чтобы вы сменили плагин!
markus 13.10.2009 13:39:58
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
};

Поскольку класс CSS, используемый для результатов <div>, не защищен внутри значений по умолчанию, все, что нам нужно сделать, - это передать наш собственный класс CSS для использования в результатах <div>. Что-то вроде следующего

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

Вам просто нужно установить соответствующий идентификатор для использования в CSS-классе resultsClass для каждого автозаполнения.

2
13.10.2009 13:22:41
ключ в том, что переданный optionsобъект добавляется последним в $.extendзначении, то есть свойства, указанные в этом объекте, будут переопределять свойства в предыдущих объектах (то есть $.Autocompleter.defaultsобъекте)
Russ Cam 13.10.2009 13:34:47