Combo box for all control

Question

I created a filterable drop Down List using JavaScript. This is the List Box Coding.

<select name="d1" class="leftselect" id="d1" size="5"  ondblclick="DropDownTextToBox('d1','t1');" style="display:none;" >
                <option>axcsus-COMMON STOCK</option>
                <option>aces</option>
            <option>bdfs</option>
            <option>befs</option>
                <option>behs</option>
            <option>dfgh</option>
                <option>dhes</option>
                <option>dwww</option>
            <option>pass</option>
                <option>pass</option>

</select>

I created 4 Text Field and a arrow character. If i click the arrow character , I'll show the list at the bottom of the control.

<div id="div_name" style="float:left;z-index: 20;">
   <input name="t1"  type="text"  id="t1" onkeyup="value_filtering('d1','t1');" onkeypress="onEnter(event,'d1','t1')" />
   <input type="button" class="rightselect" onclick="displayList('d1','t1');"  value="&#9660;" />        
</div>

<div class="inputbox">
   <input name="t2" class="inputbox" type="text"  id="t2"  onkeyup="value_filtering('d2','t2');" onkeypress="onEnter(event,'d2','t2')" />
   <input type="button" class="leftselect" onclick="displayList('d1','t2');"  value="&#9660;" />
</div>

<div style="float:left;text-align:center;" >
    <input name="t3" type="text"  id="t3" onkeyup="value_filtering('d3','t3');" onkeypress="onEnter(event,'d3','t3')" />
    <input type="button" class="rightselect" onclick="displayList('d1','t3');"  value="&#9660;" />
</div>

<div class="inputbox">
    <input name="t4" class="inputbox" type="text"  id="t4"  onkeyup="value_filtering('d4','t4');" onkeypress="onEnter(event,'d4','t4')" />
    <input type="button" class="leftselect" onclick="displayList('d1','t4');" value="&#9660;" />
</div>

In the display List function I'm getting the corresponded textbox position and displayed the List Control under the Text Box. Okie. Now my problem is If i select any option in the text box, I need to display the selected value to the textbox which the listbox shown under. After selecting the value from the list box, How i find in which text box showing the List ? Dynamically how can i find the text box id ?

This is my JS code for displaying the Listbox to the corresponding TextBox.

function displayList(ele,txt)
    {
        vis=document.getElementById(ele);
        obj=document.getElementById(txt);
        if (vis.style.display==="none")
                vis.style.display="block";
        else
            vis.style.display="none";

                vis.style.position = "absolute";

            //alert(getElementPosition(txt).top + ' ' + getElementPosition(txt).left);

    vis.style.top = getElementPosition(txt).top+obj.offsetHeight;
    vis.style.left = getElementPosition(txt).left;
    }

Note : I can call this function at the click event of arrow button. I can easily pass the text Field Id. But in the case ListBox action i can't send the particular ID of the Text Field.

@hsalama : i edited the above question. Please have a look on the post. — Smith Dwayne
Are you opposed to using libraries like jquery or mootools? This will get very messy before you know it! — Hazem Salama
@hsalama : With Jquery shall i do this job ? Any tutorial available ? — Smith Dwayne

Hazem Salama Hazem Salama · Accepted Answer · 2012-09-12T12:48:58

If you have no opposition to using jquery you can using the jquery UI built-in autocomplete which will do pretty much what you're looking for. For more advanced and nicer plugins you can try chosen

Combo box for all control

2 Answers