title: jQuery autocomplete doesn't work...
body: <p>I am using the autocomplete functionality from jQuery and am having a small problem.  I have a <code>div</code> element with some text and a variable number of input boxes that have autocomplete functionality.  When a user clicks on the text in the <code>div</code> element, the input boxes are removed.  Clicking on the text toggles between showing the input boxes and not showing the input boxes.  With each text click a php script is called that returns new html text for the <code>div</code> element. </p>
  
  <p>The autocomplete inputs are created with php code similar to the following:</p>
  
  <h2>php code</h2>
  
  <pre><code>echo "&lt;id='a' value='Smith' autocomplete='off'&gt;";
  echo "&lt;script type=\"text/javascript\"&gt;$('a').autocomplete('do_name_lookup.php',{minChars:3,max:999});&lt;/script&gt;";
  echo "&lt;script type=\"text/javascript\"&gt;$('a').result(function(event, data, formatted) {alert(data[0])});&lt;/script&gt;";
  </code></pre>
  
  <hr>
  
  <p>On a static web page the two <code>script</code> elements would appear in the "<code>$(document).ready</code>" function.  Since my page is dynamic, however, the input boxes are created a long time after <code>$(document).ready</code> has fired.  Therefore, I have to execute the javascript code just after each of the input boxes is made.  This setup works fine the first time the php code above is executed, but the second time the code is executed, the autocomplete functionality goes away.  </p>
  
  <p>Can anyone explain to me why this is happening and how to work around it? My suspicion is  that I am declaring a variable with the same name multiple times and this is creating a conflict of some type.  </p>