js实现带输入提示的文本框

 项目上page方面要实现一个功能，文本框的值，可以通过下拉列表选择，之后再编辑。
在网上search了很多方法，其中包括jquery的autocomplete插件，但是发现那个必须输入一个值后才出现下拉列表，（网友推荐的minChars为0不起效果）；最后通过有个网友的思路，将文本框覆盖到下拉列表上面，只显示最右边三角箭头，自己动手写了下js，终于实现了，发现效果还不错^^

 

目       标：文本框的值，可以通过下拉列表选择，也可以输入

实现方法：将文本框覆盖到下拉列表上面，只显示最右边三角箭头

 

<select id="choReason" style="width:320px;height:19px">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
<input type="text" id="reason" style="width:302px;height:17px">
</input>

 

 

 $("#choReason").change(function () {
            var v1 = $("#choReason option:selected").text();
            if (v1 != null) {
                $("#reason").val($("#choReason option:selected").text());
            }
        });  
$("#reason").offset({top: $("#choReason").offset().top, left: $("#choReason").offset().left});