修改select标签为可输入内容的input标签，同时在首次点击第一个下拉框时也会触发onchange事件

项目中有一块需要一个可以输入信息的下拉框，并且输入信息时动态的显示下拉框的内容，
效果如下：

javaScript代码：

    //搜索框
    function intellCheckChannel(){
        var html = "";
        html += '<select name="sel" id="sel" style="width:191px;background::#6a7383;"  onchange="querySel($(this))">';
        //遍历
        html += '<option value="" style="color:#6a7383; margin: 0px 10px 0px 10px;"><label>全部产品</label></option>';
        $.each(fuzzyQueryMap.data,function(key, value) {
                html += '<option value="'+key+'" selected="selected" style="color:#6a7383;margin: 0px 10px 0px 10px;"><label>' + value + '</label></option>';
        });
        html += '<input id="box" style="width:172px; height:19px;position:absolute;left:0px;" onkeyup="queryKeyup($(this))" name="queryVO.fundCode" value="">';
        html += '</select>';
        $("#select").html(html);
    }
    //点击时将select下拉框的值赋给input
    function querySel(sel){
        var s = sel.val();
        $("#box").val(s);
        queryRedeemFund();
    }
    //input输入信息时动态显示下拉框
    function queryKeyup(sel){
        var pid = sel.val();
        var html = "";  
        html += '<select name="sel" id="sel" style="width:191px;background::#6a7383;"  onchange="querySel($(this))">';
        html += '<option value="" style="color:#6a7383;margin: 0px 10px 0px 10px;"><label>全部产品</label></option>';
        //遍历
        $.each(fuzzyQueryMap.data,function(key, value) {
            html += '<option value="'+key+'" selected="selected" style="color:#6a7383;margin: 0px 10px 0px 10px;"><label>' + value + '</label></option>';
        });
        html += '<input id="box" style="width:172px; height:19px;position:absolute;left:0px;" onkeyup="queryKeyup($(this))" name="queryVO.fundCode" value="">';
        html += '</select>';

        html += '<div class="p_c_pull align_left">';
        html += '<ul class="querybtn">';
        //遍历
        $.each(fuzzyQueryMap.data,function(key,value) {
            if(value.indexOf(pid)!=-1){ 
                html += '<li><a href="javascript:void(0);" onclick="queryClick(\''+ key +'\');">' + value +'</a></li>';
            } 
        });
        html += '</ul>';
        html += '</div>';
        $("#select").html(html);
        //下拉框       
        $(".querybtn").niceScroll({  
                cursorcolor:"#fff",  
                cursoropacitymax:1,  
                touchbehavior:false,  
                cursorwidth:"5px",  
                cursorborder:"0",  
                cursorborderradius:"5px"
        });
        $(".querybtn").css('display','block');     
        $("#box").val(pid);
        $("#box").selectRange(pid.length,pid.length);
        queryRedeemFund();  
    }
    //input点击下拉框后隐藏
    function queryClick(sel){
        $("#box").val(sel);
        queryRedeemFund();  
        $(".querybtn").css('display','none');
    }
    //输入后定位光标将光标定位到文字后面
    $.fn.selectRange = function(start, end) {
        return this.each(function() {
            if (this.setSelectionRange) {
                this.focus();
                this.setSelectionRange(start, end);
            } else if (this.createTextRange) {
                var range = this.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', start);
                range.select();
            }
        });
    };
    //将所有界面添加onclick事件
    $(document).on('click',null,function(e){
        var subSelect,  eTarget = e.target;
        $(".querybtn").hide();
    });

Html代码：

<table class="pro_tb" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td><span class="s_ft2">持有产品筛选：</span></td>
        <td id="">
            <div id="select">
                <select style="width:150px;" ></select>
            </div>
        </td>
    </tr>
</table>

CSS代码：

<style>
.querybtn{
    position: absolute;
    border: 1px solid #e5e5e5;
    width: 170px;
    background: #fff;
    padding: 0px 18px 0px 2px;
    display: none;
    z-index: 100;
}
.querybtn  a{
    padding: 0px 10px 0px 10px;
    display:block;
    color:#6a7383;
    font-size:12px;
}
</style>