小案例:百度搜索
程序员文章站
2022-06-09 12:49:45
...
百度搜索案例(联网情况下使用)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
width: 600px;
height: 35px;
border: 1px solid #000;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
font-size: 0;
}
.block > input {
position: absolute;
left: 0;
top: 0;
border-style: none;
outline: none;
box-sizing: border-box;
width: 500px;
height: 35px;
font-size: 1rem;
padding-left: 0.5rem;
}
.block > span {
position: absolute;
right: 0;
font-size: 1rem;
display: inline-block;
width: 100px;
height: 35px;
color: #fff;
background: #15a0ff;
text-align: center;
line-height: 35px;
}
.nav {
font-size: 0.9rem;
list-style: none;
position: absolute;
top: 35px;
left: -1px;
width: 500px;
border: 1px solid #979797;
}
.nav > li {
padding-left: 0.5rem;
line-height: 30px;
}
.nav > li:hover {
background: #e4e4e4;
}
.nav a {
color: #000;
font-weight: bold;
text-decoration: none;
}
.bgcolor {
background: #e4e4e4;
}
</style>
</head>
<body>
<div class="block">
<input id="ipt" type="text"/>
<span id="btn">百度一下</span>
<ul class="nav">
</ul>
</div>
<script>
var script = null;
var isshu = false;
var index = 0;
var ipt = document.getElementById("ipt");
var btn = document.getElementById("btn");
var nav = document.getElementsByClassName("nav")[0];
var api = " https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
ipt.addEventListener("keyup", getInput(api));//创建一个监听事件
ipt.addEventListener("keydown", function (e) {
if (e.keyCode == 38 || e.keyCode == 40) {
e.preventDefault();//处理事件默认行为
}
})
btn.addEventListener("click", function () {
location.href = "https://www.baidu.com/s?wd=" + ipt.value;
})
document.body.addEventListener("keyup", function (e) {
if (!nav.children.length)return;
if (e.keyCode == 38) {
isshu = true;
index--;
if (index < 0) {
index = nav.children.length - 1;
}
nav.children[index + 1 > nav.children.length - 1 ? 0 : index + 1].className = "";
nav.children[index].className = "bgcolor";
ipt.value = nav.children[index].innerText;
}
else if (e.keyCode == 40) {
isshu = true;
if (document.getElementsByClassName("bgcolor").length) {
index++;
}
if (index > nav.children.length - 1) {
index = 0;
}
nav.children[index - 1 < 0 ? nav.children.length - 1 : index - 1].className = "";
nav.children[index].className = "bgcolor";
ipt.value = nav.children[index].innerText;
}
});
function getInput(src) {
var t;
return function () {
isshu = false;
var that = this,
args = arguments;
clearTimeout(t);
t = setTimeout(function () {
//jsonp ipt.value
jsonp.apply(that, [args, src])
}, 500);
}
}
//封装一个jsonp方法
function jsonp() {
if (isshu) {
return;
}
//动态创建一个jsonp方法
if (script) {
script.remove();
}
script = document.createElement("script");
script.src = arguments[1] + "?" + "wd=" + this.value + "&cb=getData";
document.body.appendChild(script);
}
//回调函数
function getData(res) {
nav.innerHTML = "";
res.s.forEach(function (val, index) {
var lilist = document.createElement("li");
lilist.innerHTML = "<a href='https://www.baidu.com/s?wd=" + val + "'>" + val + "</a>";
nav.appendChild(lilist);
});
index = 0;
}
</script>
</body>
</html>
上一篇: 微信小程序页面间通信的5种方式
下一篇: 百度不收录首页的原因分析