Question

我使用JavaScript创建了一个可过滤的下拉列表。这是列表框编码。

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

我创建了4个文本字段和一个箭头字符。如果我单击箭头字符，我将在控件的底部显示列表。

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

在显示列表功能中，我得到相应的文本框位置，并在文本框下显示列表控件。 Okie。现在我的问题是如果我在文本框中选择任何选项，我需要将所选值显示到列表框所示的文本框中。从列表框中选择值后，如何找到显示列表的文本框？动态地如何找到文本框ID？

这是我用于将Listbox显示到相应TextBox的JS代码。

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

注意：我可以在箭头按钮的单击事件中调用此函数。我可以轻松传递文本字段ID。但在ListBox动作的情况下，我无法发送文本字段的特定ID。

Answer 1

如果您不反对使用jquery，您可以使用内置autocomplete的jquery UI，这将完成您正在寻找的内容。对于更高级和更好的插件，您可以尝试chosen

Answer 2

试试这个。

<script>
var targetInput=null;
function displayList(ele,txt) {
    vis=document.getElementById(ele);
    obj=document.getElementById(txt);
    targetInput = obj;
    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;
    }
}
function selectList(txt) {
    if (!targetInput) return;
    targetInput.value = txt.value;
    txt.style.display = 'none';
}
</script>

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

<select name="d1" class="leftselect" id="d1" size="5" ondblclick="DropDownTextToBox('d1','t1');" onclick="selectList(this)" 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>

所有控件的组合框

2 个答案: