title: JQuery: How to clone autocomplete fields?
body: <p>I am using Jörn Zaefferer's jquery autocomplete plugin, and I can't seem to figure out how to make it work when I clone an autocomplete field. It almost works, in that the cloned autocomplete field displays the choices when the I type in text, but I cannot select items. At first I thought it was a browser-compatibility issue, but it happens in both FF3 and Safari, so I'm guessing there's a gotcha I've missed.</p>
  
  <p>Here is a working example of what I'm doing:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;Autocomplete Clone Demo&lt;/title&gt;
  &lt;style&gt;
  body {
  margin: 40px;
  }
  .hide_element {
  display: none;
  }
  &lt;/style&gt;
  &lt;link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" /&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function setAutocomplete()
      {
          var users = [
            { name: "Fred", id: "1" },
            { name: "Barney", id: "2" },
            { name: "Wilma", id: "3" }
          ];
  
          $(".user_selector").autocomplete(users, 
              {
                  mustMatch: true,
                  matchContains: true,
                  minChars: 2,
                  formatResult: function(row) { return row.name; },
                  formatItem: function(row, i, max) { return row.name; }
              }
          );
      }
  
      var current= 0;
  
      var addParticipantFields = function() 
      {
          current++;
          $newParticipant = $("#template").clone(true);
          $newParticipant.removeAttr("id");
          $newParticipant.removeClass("hide_element");
          $prefix = "extra" + current;
          $newParticipant.children("div").children(":input").each(function(i) {
              var $currentElem= $(this);
              $currentElem.attr("name",$prefix+$currentElem.attr("name"));
          });
          $newParticipant.appendTo("#participantsField");
          setAutocomplete();
      }
  
      $(document).ready(function() {
          setAutocomplete();
          $("#addParticipant").live("click", addParticipantFields);
  
      });
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Test Autocomplete Cloning&lt;/h1&gt;
  &lt;form id="demo" method="post" action=""&gt;
  &lt;fieldset id="participantsField"&gt;
  &lt;label&gt;Participants&lt;/label&gt;
  &lt;div class="participant"&gt;
      &lt;input class="user_selector" name="user" size="30"/&gt;
  &lt;/div&gt;
  &lt;/fieldset&gt;
  
  &lt;!-- This is the template for adding extra participants --&gt;
  &lt;div class="participant hide_element" id="template"&gt;
      &lt;input class="user_selector" name="_user" size="30"/&gt;
  &lt;/div&gt;
  
  &lt;p&gt;&lt;input type="button" id="addParticipant" value="Add Another Participant"&gt;&lt;/p&gt;
  &lt;p&gt;&lt;input class="button" type="submit" value="Submit"/&gt;&lt;/p&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>