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" statements would appear in the "$(document).ready" function. Since my page is dynamic, however, the input boxes are created a long time after the "$(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 suspician is that I am declaring a variable with the same name multiple times and this is creating a conflict of some type.