html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度联想词</title>
<style>
*{margin: 0;padding: 0;}
#out{width:500px;height:140px;margin: 160px 350px;}
#ser_box{width:500px;height:32px;border: 1px solid blue;text-align: center;}
#ipt{
width:480px;
height: 26px;
line-height: 26px;
margin-top: 2px;
border: 0;
outline: 0;
font-family: "微软雅黑";
font-size: 16px;
}
#bot_box{width:500px;border: 1px solid #4C9ED9;border-top: none;display: none;}
#bot_box ul li{list-style: none;line-height: 25px;padding-left: 10px;}
#bot_box ul li:hover{background: #F0F0F0;}
.s_btn {
position:relative;
left:300px;
top:-31px;
width: 100px;
height: 36px;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
background: #3385ff;
border-bottom: 1px solid #2d78f4;
outline: medium;
}
.sel{background:#BCBCBC;}
</style>
</head>
<body>
<div id="out">
<div id="ser_box">
<input type="search" id="ipt" /><span><input id="su" value="搜索一下" class="bg s_btn" type="submit"></span>
</div>
<div id="bot_box">
<ul id="oul"></ul>
</div>
</div>
</body>
</html>
js部分
function $(id) {
return document.getElementById(id);
}
var ipt = $("ipt");
var ser = $("ser_box");
var bot = $("bot_box");
var oul = $("oul");
ipt.oninput = function() {
var ss = ipt.value;
var url = "http://suggestion.baidu.com/su?cb=queryList&wd=" + ss;
addScript(url);
}
ipt.onfocus = function() {
var ss = ipt.value;
var url = "http://suggestion.baidu.com/su?cb=queryList&wd=" + ss;
addScript(url);
}
function queryList(data) {
ss=document.getElementsByTagName("script")[0];
document.body.removeChild(ss)
var arr = data.s;
oul.innerHTML = "";
if(arr.length == 0) {
bot.style.display = "none";
} else {
bot.style.display = "block";
}
for(var i = 0; i < arr.length; i++) {
li = document.createElement("li");
li.innerHTML = arr[i];
li.onclick = function() {
oul.innerHTML = "";
ipt.value = this.innerHTML;
bot.style.display = "none";
}
oul.appendChild(li);
}
}
function addScript(url) {
var s = document.createElement("script");
s.src = url;
s.type = "text/javascript";
document.body.appendChild(s);
}
/*取li*/
lis = document.getElementsByTagName("li");
/*按键*/
var i = 0;
document.onkeydown = function(ev) {
if(bot.style.display == "block") {
if(ev.keyCode == 40) {
for(var j = 0; j < lis.length; j++) {
if(lis[j].className == "sel") {
lis[j].className = "";
}
}
if(i < lis.length) {
lis[i].className = "sel";
i++;
if(i == lis.length) {
i = 0;
}
}
}
if(ev.keyCode == 38) {
m = 0
for(; m < lis.length; m++) {
if(lis[m].className == "sel") {
lis[m].className = "";
break;
}
}
i = m;
if(m > 0) {
lis[m - 1].className = "sel";
} else {
lis[lis.length - 1].className = "sel";
}
}
if(ev.keyCode == 13) {
for(var n = 0; n < lis.length; n++) {
if(lis[n].className == "sel") {
ipt.value = lis[n].innerHTML;
}
}
bot.style.display = "none";
}
} else {
i = 0;
m = 0;
}
}
一个简单的百度搜索引擎就做好了 （温馨提示：需要联网才能正常运行）
扫一扫
1574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
