jQueryはドロップダウンメニューとあいまい検索を実装します

元のアドレスhttps://blog.csdn.net/apple_01150525/article/details/53219927
<!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);  
        }  
        }  
    }  //substring(0,this_.value.length).indexOf(this_.value)==0
    function setinput(this_){  
        var select = $("#typenum");  
        select.html("");  
        for(i=0;i<TempArr.length;i++){  
            if(TempArr[i].indexOf(this_.value)!=-1){  
                var option = $("<option></option>").text(TempArr[i]);  
                select.append(option);  
            }  
        }  
    }  
</script>  
</body>  
</html>
jQueryはドロップダウンメニューとあいまい検索を実装します

おすすめ
