简单实用js——可输入可选择可模糊查询的select下拉

来源：互联网发布：陶哲轩现状知乎编辑：程序博客网时间：2024/05/06 21:28

在网上有很多可输入及模糊查询的select下拉插件，功能也很强大，比如select、chosen等，做这个的方法也是有很多的，适用自己就好，下面是我自己的一个方法，希望适合大家

CSS代码

.second select {    width: 11%;    height: 106px;    margin: 0px;    outline: none;    border: 1px solid #999;    margin-top: 31px;}.second input {    width: 167px;    top: 9px;    outline: none;    border: 0pt;    position: absolute;    line-height: 30px;    left: 8px;    height: 30px;    border: 1px solid #999;}.second ul {    position: absolute;    top: 27px;    border: 1px solid #999;    left: 8px;    width: 125px;    line-height: 16px;}.ul li{    list-style: none;    width: 161px;    /* left: 15px; */    margin-left: -40px;    font-family: 微软雅黑;    padding-left: 4px;}.blue {     background:#1e91ff; }

JS代码

var TempArr=[];//存储option$(function(){    /*先将数据存入数组*/    $("#typenum option").each(function(index, el) {        TempArr[index] = $(this).text();    });    $(document).bind('click', function(e) {          var e = e || window.event; //浏览器兼容性           var elem = e.target || e.srcElement;          while (elem) { //循环判断至跟节点，防止点击的是div子元素               if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {                  return;              }              elem = elem.parentNode;          }          $('#typenum').css('display', 'none'); //点击的不是div或其子元素       });  })function changeF(this_) {    $(this_).prev("input").val($(this_).find("option:selected").text());    $("#typenum").css({"display":"none"});}function setfocus(this_){    $("#typenum").css({"display":""});    var select = $("#typenum");    for(i=0;i<TempArr.length;i++){        var option = $("<option></option>").text(TempArr[i]);        select.append(option);    } }function setinput(this_){    var select = $("#typenum");    select.html("");    for(i=0;i<TempArr.length;i++){        //若找到以txt的内容开头的，添option        if(TempArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){            var option = $("<option></option>").text(TempArr[i]);            select.append(option);        }    }}

页面代码

<span class="second">    <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入"/>    <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;">        <option value="">1</option>        <option value="">2</option>        <option value="">12323</option>        <option value="">31</option>        <option value="">1332</option>        <option value="">412</option>        <option value="">42</option>        <option value="">11</option>    </select></span>

1 2