搜索
2019-03-14 本文已影响0人
Wo信你个鬼
rr.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
.search {
width: 202px;
height: 35px;
font-size: 0;
border: 1px solid #666;
margin: 50px auto;
}
.search input {
font-size: 18px;
height: 100%;
line-height: 35px;
width: 150px;
vertical-align: top;
}
.search input[type=button] {
width: 50px;
text-align: center;
cursor: pointer;
}
.relevant {
position: absolute;
top: 0;
left: 0;
width: 150px;
border: 1px solid #666666;
display: none;
}
.relevant li {
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 5px;
border-bottom: 1px dashed green;
font-size: 16px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.relevant li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="search">
<input type="text" class="ipt" name="" id="" value="" />
<input type="button" name="" id="" value="搜索" />
<ul class="relevant">
</ul>
</div>
<script type="text/javascript">
let ipt = document.querySelector(".ipt");
//获取数据
function getData(_url) {
var spt = document.querySelector("script[src]");
if(spt != null) {
spt.remove();
}
var _script = document.createElement("script");
_script.src = _url;
document.body.appendChild(_script);
}
ipt.addEventListener("input", () => {
let val = ipt.value;
console.log(val)
let _url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val + "&cb=callback";
getData(_url);
})
let _ul = document.querySelector("ul");
let _li = document.querySelectorAll("li");
function callback(res) {
console.log(res)
_ul.style.display = "block";
_ul.innerHTML = "";
for(let i = 0; i < res.s.length; i++) {
let _li = "<li>" + res.s[i] + "</li>";
_ul.innerHTML += _li;
}
if(res.s.length == 0) {
_ul.style.display = "none"
}
}
//点击相关内容替换文本
_ul.addEventListener("click",(e)=>{
let txt = e.target.innerHTML;
ipt.value = txt;
_ul.style.display = "none";
})
</script>
</body>
</html>
