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

最新推荐文章于 2024-06-30 16:41:12 发布

孙振光

最新推荐文章于 2024-06-30 16:41:12 发布

阅读量6.1w

点赞数 7

分类专栏： js 文章标签： select 带输入可模糊查询下拉框 jq

本文链接：https://blog.csdn.net/sun2015_07_24/article/details/53023167

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在网上有很多可输入及模糊查询的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>