運行效果圖：
運行效果圖
JavaScript核心代碼：
<script>
var oText = document.getElementById("text");
var oSea = document.getElementsByClassName("search")[0];
var oUl = oSea.getElementsByTagName("ul")[0];
oText.onkeyup = function() {
var val = this.value;
//三目運算
oSea.style.display = val ? "block" : "none";
var os = document.createElement("script");
os.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val + "&cb=xiaolong";
document.body.appendChild(os);
}
function xiaolong(json) {
oUl.innerHTML = '';
json.s.forEach(function(data) {
var oLi = document.createElement("li");
oLi.innerHTML = "<a href='https:www.baidu.com/s?wd=" + data + "'>" + data + "</a>";
oUl.appendChild(oLi);
});
}
</script>
HTML代碼：
<div class="show">
<input type="text" id="text">
<div class="but">
百度一下
</div>
<div class="search">
<ul></ul>
</div>
</div>
CSS：
<style>
* {
padding: 0;
margin: 0;
}
.title {
width: 270px;
height: 129px;
margin: 50px auto;
display: block;
}
.show {
width: 625px;
height: 38px;
margin: 0 auto;
position: relative;
}
#text {
width: 500px;
height: 34px;
text-indent: 10px;
float: left;
}
.but {
width: 102px;
height: 38px;
background-color: #38f;
font-size: 16px;
color: white;
line-height: 38px;
text-align: center;
cursor: pointer;
float: left;
}
.but:hover {
background: #0066ff;
}
.search {
width: 500px;
display: none;
border: 1px solid #ddd;
position: absolute;
top: 37px;
}
.search ul li {
list-style: none;
width: 500px;
height: 30px;
text-indent: 10px;
line-height: 30px;
}
.search ul li a {
color: #000;
text-decoration: none;
display: block;
}
.search ul li a:hover {
background: #ddd;
}
</style>
相關推薦
