JQuery搜索弹出框

来源：互联网发布：java面向对象思维导图编辑：程序博客网时间：2024/04/30 19:14

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;}

运行效果：

0 0