js实现input+select组合 抛砖引玉

在做项目时发现,很多场合都可能用到Input但又想让它具有select的特性,研究了一下,似乎可以实现,

下面的代码可以大概说明我的意图,但实际用想来,还应该用动态create的方式构建select以及隐藏的input.

设想最终版本应该是在input中定义CSS就可以实现input+select组合了.
而且还要加上方向键等在input触发的事件来控制select选择项的移动.


抛砖引玉一下,看看哪位大侠能实现这个组合.

<div style="position:absolute;z-index:2;top:100;left:200" >  <input id="t" style="display:none" name="t" type="text"  >  <input id="tt" name="tt" type="text" onfocus="g()" onkeypress="geti()" onblur="gg()" onkeydown="selectdown()"><br>  <select id="stt"  style="display:none" name="" onclick="ff()" onblur="gg()"  multiple>   <option value="1" text="1text" selected>1text</option>   <option value="2" text="2text" >2text</option>   <option value="3" text="2text" >3text</option>   <option value="4" text="2text" >4text</option>   <option value="5" text="2text" >5text</option>   <option value="6" text="2text" >6text</option>   <option value="7" text="2text" >7text</option>  </select></div><script language="JavaScript"><!--function g(){var s=document.getElementById("stt");var t=document.getElementById("tt");s.style.width=t.offsetWidth;s.style.display='';//s.style.top=t.offsetTop+t.offsetHeight+1;}function gg(){var s=document.getElementById("stt");var t=document.getElementById("tt");if (document.activeElement.id!=s.id&&document.activeElement.id!=t.id){  s.style.display='none';}}function ff(){var s=document.getElementById("stt");var t=document.getElementById("tt");var a=document.getElementById("t");a.value=s.value;t.value=s.options[s.selectedIndex].text;s.style.display='none';alert("a.value="+a.value);alert("t.value="+t.value);}function geti(){var s=document.getElementById("stt");var t=document.getElementById("tt");for (i=0;i<s.options.length ;i++ ){  if (t.value==s.options[i].value.substring(0,t.value.length)){   s.options[i].selected=true;   break;  }}}function selectdown(){var s=document.getElementById("stt");var activeIndex=s.selectedIndex+1;for (i=0;i<s.options.length ;i++ ){   s.options[i].selected=false;}s.options[activeIndex].selected=true;}//--></script>