Autcomplete for dynamically created i/p box

JavaScript
1

I have an input box “product” besides it there is an add input button which adds another input box product upon clicking.This array of input boxes I have created is through document.createElement(‘input’).

My autocomplete is working for the initial input box…now when I click add Input button for the generated box also the autocomplete shld work…how do I make it work??

PS:Autocomplete script is working so I didnt post it here… I just want it to make it working dynamically created i/p boxes

2 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="ajax-dynamic-list.js"></script>  
	<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Golden Collection </title>
<style type="text/css">	 
	
	#mainContainer{
		width:660px;
		margin:0 auto;
		text-align:left;
		height:100&#37;;
		background-color:#FFF;
		border-left:3px double #000;
		border-right:3px double #000;
	}
	#formContent{
		padding:5px;
	}
	/* END CSS ONLY NEEDED IN DEMO */
/* Big box with list of options */
	#ajax_listOfOptions{
		position:absolute;	/* Never change this one */
		width:175px;	/* Width of box */
		height:250px;	/* Height of box */
		overflow:auto;	/* Scrolling features */
		border:1px solid #317082;	/* Dark green border */
		background-color:#FFF;	/* White background color */
		text-align:left;
		font-size:0.9em;
		z-index:100;
	}
	#ajax_listOfOptions div{	/* General rule for both .optionDiv and .optionDivSelected */
		margin:1px;		
		padding:1px;
		cursor:pointer;
		font-size:0.9em;
	}
	#ajax_listOfOptions .optionDiv{	/* Div for each item in list */
		
	}
	#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
		background-color:#317082;
		color:#FFF;
	}
	#ajax_listOfOptions_iframe{
		background-color:#F00;
		position:absolute;
		z-index:5;
	}
	
	form{
		display:inline;
	}
	
	</style>

<script type="text/javascript" language="javascript"> 
 function addRow1(id){
    var tbody = document.getElementById
  (id).getElementsByTagName("TBODY")[0];
  
    var row = document.createElement("TR")
   var td2 = document.createElement("TD")
  var tt2 = document.createElement('input')
  tt2.type = 'text'
    tt2.value = ''
  tt2.size = '45'
  tt2.name = 'prod_name[]'
   td2.appendChild (tt2)
		
 
  var td3 = document.createElement("TD")
  td3.setAttribute('align','left')
  var tt3 = document.createElement('input')
  tt3.type = 'button'
    tt3.value = 'Remove'
  tt3.name = 'bttn' 
  tt3.onclick=function(){removeRowFromTable1(this);};
    td3.appendChild (tt3)
  
   row.appendChild(td2);
  row.appendChild(td3);
  tbody.appendChild(row);   

  }
  function removeRowFromTable1(obj){

 var tbl = document.getElementById('exp1254911560'); 
 var par=obj.parentNode;
 par=par.parentNode;
 var tt = par.rowIndex;
 tbl.deleteRow(par.rowIndex);
}
 
 </script>

</head>

<body>

 <form name="form1" method="post"> 
<table width="98%" cellpadding="0" cellspacing="0"  class="data-table">

<tr><td  colspan="9">
 <table id="exp1254911560">
               
               
                <td width="31%">Product Name <span style="color:#FF0000"> * </span></td>
               
                <td><input type="button" name="add" value="Add Input" onClick="addRow1('exp1254911560')"></td>
                </tr>
				 <tr>
                    <td><h6>
    <input name="prod_name[]" type="text" size="45" onKeyUp="ajax_showOptions(this,'getname',event)"   />  
  </h6></td>  
               
                
                <td><input type="button" name="remove[]" value="Remove" onClick="removeRowFromTable1(this)" ></td>
                </tr>
               </table>  
               
</td>
</tr>
</table>
</form> 

</body>
</html>
3

The input element requires an event handler for the keyup event.