一、页面代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www./TR/html4/loose.dtd">
<html>
<head>
<title>js/jQuery实现类似百度搜索功能</title>
<meta name="Author"
content="Michael">
<meta name="Keywords"
content="js/jQuery实现类似百度搜索功能">
<meta name="Description"
content="js/jQuery实现类似百度搜索功能,可用键盘控制">
<meta http-equiv="content-type"
content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="http://code./jquery-1.8.3.js"></script>
<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>
</head>
<body>
<div id="container">
<div id="content">
<div
class="first"><input id="kw"
onKeyup="getContent(this);"
/></div>
<div
id="append"></div>
</div>
</div>
</body>
</html> 二、js代码: <script
type="text/javascript">
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){
dojob();
}
});
var movePrev
= function(){
$("#kw").blur();
var index = $(".addbg").prevAll().length;
|