Autcomplete for dynamically created i/p box - JavaScript

JavaScript

Moderators: None (Apply to moderate this forum)

Number of threads: 2061
Number of posts: 5164

With full replies

Topics only

JavaScript

Forum Info

This Forum Only

Single Post View Linear View Threaded View f

Printer Friendly

RSS Feed

Autcomplete for dynamically created i/p box Posted by chocoboy on 20 Mar 2010 at 12:19 AM

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

Share By Email

Re: Autcomplete for dynamically created i/p box Posted by chocoboy on 20 Mar 2010 at 12:22 AM

<!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%;
		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>

Share By Email

Re: Autcomplete for dynamically created i/p box Posted by CyGuy on 22 Mar 2010 at 9:31 PM

: 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
:
Not knowing the browser ur using, here is the problem in major browser

 i= (b) ? "input" : "<input type=text>";
 var ri=document.createElement(i);
 var r=document.Form.appendChild(ri);

then use the variable r as the dom instantiated object to set attributes and what-not

PS stay away from those tables, but if you must; I have code for that too
WHAT you;see_is_what=you.get;
-Russ aka DangeRuss

Share By Email

Re: Autcomplete for dynamically created i/p box Posted by chocoboy on 23 Mar 2010 at 10:04 PM

I wld like the input box as it is....but u may use any other autcomplete on these i/p boxes.... plz help me in this regard

Share By Email

Re: Autcomplete for dynamically created i/p box Posted by CyGuy on 24 Mar 2010 at 5:00 PM

Oh, I see now. Previous missing my read of td3.appendChild (tt3)...
So the line before that having .onclick function to remove row. due the same with the event handling code = element.onkeyup function to AJAX the autocomplete like the other input box. Sorry if Im still confused... is this what you need?
WHAT you;see_is_what=you.get;
-Russ aka DangeRuss

Share By Email

JavaScript

Recent Jobs