/    Sign up×
Community /Pin to ProfileBookmark

Autcomplete for dynamically created i/p box

Copy linkTweet thisAlerts:
Mar 20.2010

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??

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

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@chocoboyauthorMar 20.2010 — <!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>
&lt;script type="text/javascript" src="ajax-dynamic-list.js"&gt;&lt;/script&gt; <br/>
&lt;link rel="stylesheet" href="../css/style.css" type="text/css" media="all" /&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Golden Collection &lt;/title&gt;
&lt;style type="text/css"&gt;

<i> </i>#mainContainer{
<i> </i> width:660px;
<i> </i> margin:0 auto;
<i> </i> text-align:left;
<i> </i> height:100%;
<i> </i> background-color:#FFF;
<i> </i> border-left:3px double #000;
<i> </i> border-right:3px double #000;
<i> </i>}
<i> </i>#formContent{
<i> </i> padding:5px;
<i> </i>}
<i> </i>/* 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 */

<i> </i>}
<i> </i>#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
<i> </i> background-color:#317082;
<i> </i> color:#FFF;
<i> </i>}
<i> </i>#ajax_listOfOptions_iframe{
<i> </i> background-color:#F00;
<i> </i> position:absolute;
<i> </i> z-index:5;
<i> </i>}

<i> </i>form{
<i> </i> display:inline;
<i> </i>}

<i> </i>&lt;/style&gt;

&lt;script type="text/javascript" language="javascript"&gt;
function addRow1(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];

<i> </i>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);
}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form name="form1" method="post"&gt;
&lt;table width="98%" cellpadding="0" cellspacing="0" class="data-table"&gt;

&lt;tr&gt;&lt;td colspan="9"&gt;
&lt;table id="exp1254911560"&gt;


<i> </i> &lt;td width="31%"&gt;Product Name &lt;span style="color:#FF0000"&gt; * &lt;/span&gt;&lt;/td&gt;

<i> </i> &lt;td&gt;&lt;input type="button" name="add" value="Add Input" onClick="addRow1('exp1254911560')"&gt;&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;tr&gt;
<i> </i> &lt;td&gt;&lt;h6&gt;
<i> </i>&lt;input name="prod_name[]" type="text" size="45" onKeyUp="ajax_showOptions(this,'getname',event)" /&gt;
&lt;/h6&gt;&lt;/td&gt;


<i> </i> &lt;td&gt;&lt;input type="button" name="remove[]" value="Remove" onClick="removeRowFromTable1(this)" &gt;&lt;/td&gt;
<i> </i> &lt;/tr&gt;
<i> </i> &lt;/table&gt;

&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@FangMar 20.2010 — Add the onKeyUp handler to tt2
Copy linkTweet thisAlerts:
@chocoboyauthorMar 20.2010 — Add the onKeyUp handler to tt2[/QUOTE]

how do i do it?? Im still a noob in JS
Copy linkTweet thisAlerts:
@FangMar 20.2010 — tt2.onKeyUp =function(){ajax_showOptions(this,'getname',event);};This may not work in passing the [I]event[/I]. This will probably require changing the original script.

A better solution would have been to use Event Delegation which avoids the problem. A script re-write would be necessary.
×

Success!

Help @chocoboy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...