仿百度联想搜索框

最新推荐文章于 2018-09-03 11:49:29 发布

MayJay517

最新推荐文章于 2018-09-03 11:49:29 发布

阅读量809

点赞数 1

本文链接：https://blog.csdn.net/mayjay517/article/details/78578084

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.title {
display: block;
margin: 100px auto 0px;
width: 280px;
height: 130px;
}
.show{width:625px;height: 35px;
margin: 20px auto;
position: relative;}
#text{width: 500px;height: 35px;
text-indent: 10px;
float: left;}
.but{width: 110px;height: 39px;
background: #0099cc;
color: #fff;
line-height: 39px;
text-align: center;
cursor: pointer;
float: left;}
.but:hover{background: #3399cc;}
.search{width: 502px;
border: 1px solid #ddd;
display: none;
position: absolute;
top:37px;}
.search ul li{width: 502px;height: 30px;
text-indent: 10px;
line-height: 30px;
list-style: none;}
.search ul li a{color: #000;
text-decoration: none;
display: block;
}
.search ul li a:hover{background: #ddd;}
</style>
</head>
<body>
<div class="title">
<img src="img/0.png" alt="" />
</div>
<div class="show">
<input type="text" name="" id="text" value="" />
<div class="but">
百度一下
</div>
<div class="search">
<ul>

</ul>
</div>
</div>
<script type="text/javascript">
var oText = document.getElementById("text");
var oSea = document.querySelector(".search");
var oUl = document.querySelector("ul");
oText.onkeyup = function(){
oText.value ? oSea.style.display = "block" : oSea.style.display = "none";
var os = document.createElement("script");
os.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+oText.value+"&cb=may";
document.body.appendChild(os);
};
function may(json){
oUl.innerHTML = null;
json.s.forEach(function(e){
var oLi = document.createElement("li");
oLi.innerHTML = "<a href='https://www.baidu.com/s?wd="+e+"'>"+e+"</a>";
oUl.appendChild(oLi);
});
}
</script>
</body>
</html>