您的位置：首页 > Web前端 > JQuery

JQuery搜索弹出框

2016-06-07 10:45 666 查看

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

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航