类百度搜索提示

geminihr 2016-06-30

<!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>

相关推荐