IE6、模糊搜索、z-index层级

最新推荐文章于 2020-07-30 17:03:47 发布

CN_CKG__KK

最新推荐文章于 2020-07-30 17:03:47 发布

阅读量145

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/stormyk/article/details/82465065

版权

笔记专栏收录该内容

20 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="jquery-1.9.1.min.js"></script>
    <title></title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
        }

        form {
            width: 500px;
            margin: 0 auto;
        }

        .items {
            position: relative;
            margin-bottom: 5px;
        }

        input[type='text'] {
            width: 100%;
        }

        .div_items {
            position: absolute;
            height: auto;
            width: 100%;
            border: 1px solid #66afe9;
            border-top: 0;
            overflow: auto;
            display: none;
            background-color: #fff;
            z-index: 9999;
        }

        .div_item {
            width: 100%;
            height: 20px;
            margin-top: 1px;
            font-size: 13px;
            line-height: 20px;
            cursor: pointer;
        }

        .div_item:hover {
            background-color: #1C86EE;
            color: #fff;
        }

        .p-rlt {
            position: relative;
            z-index: 1000;
            zoom: 1;
        }
    </style>
</head>
<body>

<!--表单的autocomplete="off"属性设置可以阻止浏览器默认的提示框-->
<form autocomplete="off">
    <table style="width: 100%;position: relative;z-index: 1;">
        <tr>
            <td class="items">
                <input type="text" class="inputSelect"/>
            </td>
            <td class="items">
                <input type="text" class="inputSelect"/>
            </td>
        </tr>
        <tr>
            <td class="items">
                <input type="text" class="inputSelect"/>
            </td>
            <td class="items">
                <input type="text" class="inputSelect"/>
            </td>
        </tr>
        <tr>
            <td class="items">
                <input type="text" class="inputSelect"/>
            </td>
            <td class="items">
                <input type="text" class="inputSelect"/>
            </td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    //隐藏列表框
    $("body").click(function () {
        $(".div_items").remove();
    });

    $(".inputSelect").click(function (e) {
        e.stopPropagation();
        $("table").find(".p-rlt").removeClass("p-rlt");
        $(this).closest("td").addClass("p-rlt");
        $(".div_items").remove();
        var a = "12;13;23;24;35;36";
        var aArry = new Array();
        aArry = a.split(";");
        var str = "";
        for (var i = 0; i < aArry.length; i++) {
            str == "" ? str = "<div class='div_item'>" + aArry[i] + "</div>" : str = str + "<div class='div_item'>" + aArry[i] + "</div>";
        }
        var divItems = $("<div class='div_items'></div>");
        divItems.html(str);
        divItems.appendTo($(this).closest(".items"));
        $(".div_items").on('click', '.div_item', function () {
            $(this).closest(".div_items").siblings().val($(this).text());
        });
        $(this).closest(".items").find(".div_items").css('display', 'block');
    });

    // 文本框输入
    $(".inputSelect").keyup(function () {
        var divItem = $(this).closest(".items").find(".div_item");
        divItem.css('display', 'none');//如果填了，先将所有的选项隐藏
        for (var i = 0; i < divItem.length; i++) {
            if (divItem.eq(i).text().indexOf($(this).val()) >= 0) {
                divItem.eq(i).css('display', 'block');
            }
        }
    });
</script>
</body>
</html>

CN_CKG__KK

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6、模糊搜索、z-index层级

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;script src="jquery-1.9.1.min.js"&gt;&lt;/script
复制链接

扫一扫