码迷,mamicode.com
首页 > 其他好文 > 详细

模仿百度搜索

时间:2016-07-06 14:40:30      阅读:171      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模仿百度搜索 </title>
</head>
<link rel="stylesheet" href="css/bootstrap.css" />
<style type="text/css">
#container {
position: absolute;
left: 50%;
top: 40%;
}

#content {
float: left;
position: relative;
right: 50%;
}

input {
border: 0;
width: 288px;
height: 30px;
font-size: 16px;
padding: 0 5px;
line-height: 30px;
}

.item {
padding: 3px 5px;
cursor: pointer;
}

.addbg {
background: #87A900;
}

.first {
border: solid #87A900 2px;
width: 300px;
}

#append {
border: solid #87A900 2px;
border-top: 0;
display: none;
}
</style>

<body>

<div id="container">
<div id="content">
<div class="first"><input id="kw" onKeyup="getContent(this);" /></div>
<div id="append"></div>
</div>
</div>

<script type="text/javascript " src="js/jquery-1.9.1.min.js " charset="UTF-8 "></script>
<!--<script type="text/javascript " src="js/bootstrap.js "></script>-->
<script>
var data = [
"你好,我是Michael",
"你是谁",
"你最好啦",
"你最珍贵",
"你是我最好的朋友",
"你画我猜",
"你是笨蛋",
"你懂得",
"你为我着迷",
"你是我的眼"
];
$(document).ready(function() {
$(document).keydown(function(e) { //键盘监听
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if (keycode == 38) { //向上键
if (jQuery.trim($("#append").html()) == "") {
return;
}
movePrev();
} else if (keycode == 40) { //向下键
if (jQuery.trim($("#append").html()) == "") {
return;
}
$("#kw").blur();
if ($(".item").hasClass("addbg")) {
moveNext();
} else {
$(".item").removeClass(‘addbg‘).eq(0).addClass(‘addbg‘);
}

} else if (keycode == 13) { //enter键
dojob();
}
});

var movePrev = function() { //当敲击向上键将焦点移动到某条数据上时,高亮显示该数据
$("#kw").blur();
var index = $(".addbg").prevAll().length;
if (index == 0) {
$(".item").removeClass(‘addbg‘).eq($(".item").length - 1).addClass(‘addbg‘);
} else {
$(".item").removeClass(‘addbg‘).eq(index - 1).addClass(‘addbg‘);
}
}

var moveNext = function() { //当敲击向下键将焦点移动到某条数据上时,高亮显示该数据
var index = $(".addbg").prevAll().length;
if (index == $(".item").length - 1) {
$(".item").removeClass(‘addbg‘).eq(0).addClass(‘addbg‘);
} else {
$(".item").removeClass(‘addbg‘).eq(index + 1).addClass(‘addbg‘);
}

}

var dojob = function() { //当敲击enter键时,将选中的数据填充到输入框中,并将显示数据的展开层隐藏掉
$("#kw").blur();
var value = $(".addbg").text();
$("#kw").val(value);
$("#append").hide().html("");
}
});

function getContent(obj) { //触发搜索
var kw = jQuery.trim($(obj).val()); //得到输入框的值
if (kw == "") { //输入框没有输入任何值
$("#append").hide().html("");
return false;
}
var html = "";
for (var i = 0; i < data.length; i++) { //输入框有值,data 应该是后台抛出的json数据
if (data[i].indexOf(kw) >= 0) { //在后台得到的数据集合中匹配包含输入框输入的值的数据,并加载到一个扩展层中
html = html + "<div class=‘item‘ onmouseenter=‘getFocus(this)‘ onClick=‘getCon(this);‘>" + data[i] + "</div>"
}
}
//判断是否匹配到了数据
if (html != "") {
$("#append").show().html(html);
} else {
$("#append").hide().html("");
}
}

function getFocus(obj) { //在扩展层中,当鼠标移动到某个数据上时,高亮显示此数据,并移除其余数据的高亮
$(".item").removeClass("addbg");
$(obj).addClass("addbg");
}

function getCon(obj) { //选中扩展层中的某个数据,将其填充到输入框中
var value = $(obj).text();
$("#kw").val(value);
$("#append").hide().html("");
}
</script>
</body>

</html>

模仿百度搜索

标签:

原文地址:http://www.cnblogs.com/yifuKing/p/5646584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!