jQuery实现下拉菜单和模糊搜索

最新推荐文章于 2024-07-26 16:15:39 发布

瞬间空白sky

最新推荐文章于 2024-07-26 16:15:39 发布

阅读量7.7k

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/apple_01150525/article/details/53219927

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

话不多说，直接上代码，自行引入jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .second select {
            width: 11%;
            height: 106px;
            margin: 0px;
            outline: none;
            border: 1px solid #999;
            margin-top: 35px;
        }
        .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;
            margin-left: -40px;
            padding-left: 4px;
        }
        .blue {
            background:#1e91ff;
        }
    </style>
</head>
<body>
<div 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="">12</option>
        <option value="">123</option>
        <option value="">1234</option>
        <option value="">12345</option>
        <option value="">123456</option>
        <option value="">1234567</option>
        <option value="">12345678</option>
    </select>
</div>
<script src = "js/jquery.js"></script>
<script type = "text/javascript">
    var TempArr=[];
    $(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) {
                if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {
                    return;
                }
                elem = elem.parentNode;
            }
            $('#typenum').css('display', 'none');
        });
    })
    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");
        select.empty();
        setinput(this_);
        if(!select){
        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++){
            if(TempArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){
                var option = $("<option></option>").text(TempArr[i]);
                select.append(option);
            }
        }
    }
</script>
</body>
</html>