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