js 模糊下拉搜索死数据有效测试

js 模糊下拉搜索提供学习使用学习笔记
记录的笔记,当初记录在word文档侵权就删哈
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>省份与省市级联</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .second select {
    
    
            width:169px;
            height:106px;
            margin:0px;
            margin-top:60px;
            outline:none;
            border:1px solid #999;
            margin-top:31px;
        }
        .second input {
    
    
            width:167px;
            top:6px;
            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;
        }

    </style>
</head>

<!--<script language="javascript" src="province.js" type="text/javascript" charset="utf-8"></script>-->

<body>

<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="">111</option>
        <option value="">2222</option>
        <option value="">12323</option>
        <option value="">31</option>
        <option value="">1332</option>
        <option value="">412</option>
        <option value="">42</option>
        <option value="">555</option>
    </select>
</span>


</body>
<script>
    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);
            }
        }
    }
</script>
</html>
js 模糊下拉搜索 死数据 有效测试

猜你喜欢

js 模糊下拉搜索死数据有效测试
