›

Autcomplete for dynamically created i/p box

chocoboychocoboy
in JavaScript
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]

Comments

  • chocoboychocoboy
    [code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">






    Golden Collection


    #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;
    }




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





    Product Name *








    [/code]
  • CyGuyCyGuy
    : 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]
    :
    Not knowing the browser ur using, here is the problem in major browser

    [code] i= (b) ? "input" : "";
    var ri=document.createElement(i);
    var r=document.Form.appendChild(ri);[/code]

    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
    [green]WHAT you;see_is_what=you.get;[/green]
    -Russ aka DangeRuss
  • chocoboychocoboy
    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
  • CyGuyCyGuy
    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?
    [green]WHAT you;see_is_what=you.get;[/green]
    -Russ aka DangeRuss
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories

In this Discussion