모든 컨트롤 용 콤보 상자

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

참고 :이 기능은 화살표 버튼의 클릭 이벤트에서 호출 할 수 있습니다. Field Id 텍스트를 쉽게 전달할 수 있습니다. 하지만 ListBox 액션의 경우 텍스트 필드의 특정 ID를 보낼 수 없습니다.

Answer 1

jquery을 사용하는 것에 대한 반대가 없다면 jquery UI가 내장 된 autocomplete을 사용하면 원하는 것을 거의 할 수 있습니다. 더 고급의 플러그인을 사용해 볼 수 있습니다. 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>