JQuery搜索弹出框

最新推荐文章于 2022-11-16 14:36:25 发布

archer.wu

最新推荐文章于 2022-11-16 14:36:25 发布

阅读量2.1k

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/wild46cat/article/details/51602054

版权

JQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JQuery搜索弹出框

类似于百度搜索的弹出框，可以很方便的在程序中使用，虽然没有做到封装或者做成jquery插件，但是不影响正常的使用，下面是代码。

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <link href="test.css" rel="stylesheet" type="text/css">

</head>
<body>

    <div id="ss" style="border: 1px solid red;height: 400px;">
        <button>点击</button>
    <div class="out">
    abcd:<input type="text" id="aaa"/>
    <div class="tishi" id="tishi">
        <p class="item">123</p>
        <p class="item">1233</p>
        <p class="item">1234</p>
        <p class="item">1235</p>
    </div>
        <p>sssssssssssssss</p>
        <p>sssssssssssssss</p>
        <p>sssssssssssssss</p>
    </div>
    </div>
</body>
</html>

test.js

$(function () {
    $('#aaa').keyup(function () {
        if ($(".tishi").is(":hidden")) {
            $('.tishi').show();
        }
    });

    $('#ss').click(function () {
        $('.tishi').hide();
    });
    $('.tishi p').click(function () {
        $('#aaa').val($(this).text());
        $('.tishi').hide();
        return false;
    });

    $('.item').mouseover(function () {
        $(this).css("background-color", "cornflowerblue");
    });
    $('.item').mouseout(function () {
        $(this).css("background-color", "#FFFFFF");
    });

    /* $("body").not("#out").click(function(){
     $('.tishi').hide();
     return false;//阻止冒泡
     });*/

});

test.css

.out{
    margin: 40px;
    width: 200px;
}
#aaa{
    width:98%;
}
.tishi{
    border: 1px solid #ccc;
    width: 200px;
    display: none;
    position: absolute;
    z-index: 999;
    background: #ffffff;
}

.tishi p{
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    cursor: pointer;
    line-height: 20px;
    text-align: left;
}

运行效果：