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

在网上有很多可输入及模糊查询的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" οnfοcus="setfocus(this)" οninput="setinput(this);" placeholder="请选择或输入"/>
    <select name="makeupCoSe" id="typenum" οnchange="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>


评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值