title: Autocomplete customize it - Jquery
body: <p>Before I start the question, I know that some of you won't read the question carefully and will think that I'm asking for something as simple as <code>addClass("custom1")</code> to my original <code>#elem</code>, like this:</p>
  
  <pre><code>$("#elem1").autocomplete("source1.php").addClass("custom1");
  </code></pre>
  
  <p><strong>This won't do it</strong>, because I'm not trying to add the class to my target div... I'm trying to add it to the dynamically-generated div that the plugin generates.</p>
  
  <p><strong>Now to my question :)</strong> thanks in advance</p>
  
  <p>I have several autocompletes like this:</p>
  
  <pre><code>$("#elem1").autocomplete("source1.php"); 
  $("#elem2").autocomplete("source2.php");
  $("#elem3").autocomplete("source3.php");
  </code></pre>
  
  <p>By default, the results for each one are returned in a separate div class called <code>.ac_results</code> that gets added before the body close. </p>
  
  <pre><code>   &lt;div class="ac_results" style="display: none;"&gt;
        &lt;ul style="overflow: auto; max-height: 180px;"&gt;
          //the results here as li's.. they vary with what you typed
        &lt;/ul&gt;
     &lt;/div&gt;
     &lt;div class="ac_results" style="display: none;"&gt;
        &lt;ul style="overflow: auto; max-height: 180px;"&gt;
          //**THESE LIs ARE DIFFERENT FROM THE SET ABOVE**
        &lt;/ul&gt;
     &lt;/div&gt;
     &lt;div class="ac_results" style="display: none;"&gt;
        &lt;ul style="overflow: auto; max-height: 180px;"&gt;
          //**THESE LIs ARE EVEN DIFFERENT FROM THE 2 SETS ABOVE**
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have a custom class though <strong>for each <code>#elem</code></strong> that I need to add to the divs that the plugin dynamically generates, to make the end result look like this: (the only change is I added <code>custom1 custom2 custom3</code> classes)</p>
  
  <pre><code>   &lt;div class="ac_results custom1" style="display: none;"&gt;
        &lt;ul style="overflow: auto; max-height: 180px;"&gt;
          //the results here as li's.. they vary with what you typed
        &lt;/ul&gt;
     &lt;/div&gt;
     &lt;div class="ac_results custom2" style="display: none;"&gt;
        &lt;ul style="overflow: auto; max-height: 180px;"&gt;
          //**THESE LIs ARE DIFFERENT FROM THE SET ABOVE**
        &lt;/ul&gt;
     &lt;/div&gt;
     &lt;div class="ac_results custom3" style="display: none;"&gt;
        &lt;ul style="overflow: auto; max-height: 180px;"&gt;
          //**THESE LIs ARE EVEN DIFFERENT FROM THE 2 SETS ABOVE**
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>so I need to either: </p>
  
  <ul>
  <li>somehow wipe off the default .ac_results completely and replace it with my own classes (different class for each elem) at each .autocomplete() declareation</li>
  <li>or keep the <code>ac_results</code> and add my custom classes (different for each autocomplete) after it's rendered </li>
  </ul>
  
  <p>The problem:</p>
  
  <ul>
  <li><p>The html divs the plugin generates all look the same. You can't tell the difference short of examining the content of the li's.</p></li>
  <li><p>The html divs get generated only <strong>after</strong> you start typing into the autocomplete for that #elem, <strong>AND</strong> whichever gets used last, gets added to the DOM last before the body close. </p>
  
  <ul>
  <li><strong>This means I can't use DOM order to map them</strong>. </li>
  <li>At first-render of html, the DOM will not have any <code>div class="ac_results"</code>. If <code>#elem3</code> was used, one <code>div class="ac_results"</code> gets added for it. If <code>#elem1</code> was used after, another <code>div class="ac_results"</code> gets added for it, so the div for <code>elem1</code> is actually after the div for <code>elem3</code>, hence what I said about not being able to use order. </li>
  </ul></li>
  </ul>
  
  <p><strong>Some extra info</strong></p>
  
  <p>I'm using JQuery Autocomplete 1.1. This link from the jquery issues is a very close file, although not identical <a href="http://plugins.jquery.com/files/issues/jquery.autocomplete.js__0.txt" rel="nofollow noreferrer">http://plugins.jquery.com/files/issues/jquery.autocomplete.js__0.txt</a>.</p>
  
  <p>From the file, I have on my HDD, here's some of the code. I removed most of the lines that aren't important. The most important is <code>resultsClass: "ac_results"</code>, that's the class of the div that gets auto-generated. </p>
  
  <pre><code>   $.Autocompleter.defaults = {
          inputClass: "ac_input",
          resultsClass: "ac_results",
          loadingClass: "ac_loading",
          extraParams: {},
      };
  </code></pre>
  
  <p>The resultClass then gets used later on in a function init(), I'm displaying this intact without removing any lines just in case. <strong>Ideally what I want to do is make init accept an extra class.</strong></p>
  
  <pre><code>// Create results
  function init() {
      if (!needsInit)
          return;
      element = $("&lt;div/&gt;")
      .hide()
      .addClass(options.resultsClass)
      .css("position", "absolute")
      .appendTo(document.body);
  
      list = $("&lt;ul/&gt;").appendTo(element).mouseover( function(event) {
          if(target(event).nodeName &amp;&amp; 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 &gt; 0 )
          element.css("width", options.width);
  
      needsInit = false;
  } 
  </code></pre>