类似百度搜索提示
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>js/jQuery实现类似百度搜索功能</title>
<metaname="Author"content="Michael">
<metaname="Keywords"content="js/jQuery实现类似百度搜索功能">
<metaname="Description"content="js/jQuery实现类似百度搜索功能,可用键盘控制">
<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>
<scripttype="text/javascript"src="jquery.min.js"></script>
<styletype="text/css">
#containerinput{
border:solid#87A9002px;
width:288px;
height:30px;
font-size:16px;
padding:05px;
line-height:30px;
}
#container.item{
padding:3px5px;
cursor:pointer;
}
#container.addbg{
background:#87A900;
}
#container.first{
width:300px;
}
#container.append{
border:solid#87A9002px;
border-top:0;
display:none;
}
</style>
</head>
<body>
<divid="container">
<divid="content">
<divclass="first"><inputclass="kw"onKeyup="getContent(this);"/></div>
<divclass="append"></div>
</div>
</div>
<scripttype="text/javascript">
vardata=[
"你好，我是Michael",
"你是谁",
"你最好啦",
"你最珍贵",
"你是我最好的朋友",
"你画我猜",
"你是笨蛋",
"你懂得",
"你为我着迷",
"你是我的眼"
];
$(document).ready(function(){
$(document).keydown(function(e){
e=e||window.event;
varkeycode=e.which?e.which:e.keyCode;
if(keycode==38){
if(jQuery.trim($(".append").html())==""){
return;
}
movePrev();
}elseif(keycode==40){
if(jQuery.trim($(".append").html())==""){
return;
}
$(".kw").blur();
if($(".item").hasClass("addbg")){
moveNext();
}else{
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}
}elseif(keycode==13){
dojob();
}
});
varmovePrev=function(){
$(".kw").blur();
varindex=$(".addbg").prevAll().length;
if(index==0){
$(".item").removeClass('addbg').eq($(".item").length-1).addClass('addbg');
}else{
$(".item").removeClass('addbg').eq(index-1).addClass('addbg');
}
}
varmoveNext=function(){
varindex=$(".addbg").prevAll().length;
if(index==$(".item").length-1){
$(".item").removeClass('addbg').eq(0).addClass('addbg');
}else{
$(".item").removeClass('addbg').eq(index+1).addClass('addbg');
}
}
vardojob=function(){
$(".kw").blur();
varvalue=$(".addbg").text();
$(".kw").val(value);
$(".append").hide().html("");
}
});
functiongetContent(obj){
varkw=jQuery.trim($(obj).val());
if(kw==""){
$(".append").hide().html("");
returnfalse;
}
varhtml="";
for(vari=0;i<data.length;i++){
if(data[i].indexOf(kw)>=0){
html=html+"<divclass='item'onmouseenter='getFocus(this)'onClick='getCon(this);'>"+data[i]+"</div>"
}
}
if(html!=""){
$(".append").show().html(html);
}else{
$(".append").hide().html("");
}
}
functiongetFocus(obj){
$(".item").removeClass("addbg");
$(obj).addClass("addbg");
}
functiongetCon(obj){
varvalue=$(obj).text();
$(".kw").val(value);
$(".append").hide().html("");
}
$(function(){
$c=$(".append");
$c.hide();
$(".input1").on({
"click":function(){
$c.toggle();
returnfalse;
}
});
$(document).on({
"click":function(e){
varsrc=e.target;
if(src.id&&src.id==="c"){
returnfalse;
}else{
$c.hide();
}
}
});
})
</script>
</body>
</html>