jQuery autocomplete doesn't work...

I am using the autocomplete functionality from jQuery and am having a small problem. I have a div element with some text and a variable number of input boxes that have autocomplete functionality. When a user clicks on the text in the div 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 div element.

The autocomplete inputs are created with php code similar to the following:

php code

echo "<id='a' value='Smith' autocomplete='off'>";
echo "<script type=\"text/javascript\">$('a').autocomplete('do_name_lookup.php',{minChars:3,max:999});</script>";
echo "<script type=\"text/javascript\">$('a').result(function(event, data, formatted) {alert(data[0])});</script>";

On a static web page the two script elements would appear in the "$(document).ready" function. Since my page is dynamic, however, the input boxes are created a long time after $(document).ready 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.

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 s开发者_C百科ame name multiple times and this is creating a conflict of some type.

<id='a' value='Smith' autocomplete='off'>

This is no valid element, it misses a tag name. Want to amend "input"?

$('a')…

This selects all anchor elements (links) in the page. I guess you wanted the id selector $('#a').

Also, you should really combine the two script elements to one. Not only because there are limits in some browsers. A <script> may contain more than one JavaScript statement, and you just may want to chain the two methods of the same selected element.