效果图如下:
html部分:
<input type="text" id="inp"><button>搜索</button>
<ul id="oul"></ul>
css部分:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
width: 300px;
height: 40px;
margin-left: 550px;
margin-top: 100px;
}
button {
width: 100px;
height: 45px;
}
ul {
margin-left: 550px;
width: 300px;
box-shadow: 0px 0px 5px #ccc;
list-style: none;
border: 1px solid #ccc;
border-top: 0px;
padding: 5px;
}
</style>
js部分:
<script>
//url为百度接口,wd后面拼上要搜索的内容。
var url = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=';
var oul = document.getElementById('oul');
var inp = document.getElementById('inp');
//oninput事件,input内value发生改变时触发,事件触发的第一步是先清除上一个script。
inp.oninput = function () {
var ourl = url + inp.value + '&cb=fn';
del();
//input内无值时,页面无内容。有值的时候发送请求。
if (this.value != '') {
var jsonp = document.createElement('script');
jsonp.src = ourl;
document.body.appendChild(jsonp);
} else {
oul.innerHTML = ' ';
}
}
function fn(data) {
//接收的数据显示之前清除上一次显示的内容。
oul.innerHTML = ' ';
for (var i = 0; i < data.s.length; i++) {
var oli = document.createElement('li');
oli.innerHTML = data.s[i];
//为每一项添加点击事件,点击时将点击的内容显示到input中。
oli.onclick = function () {
inp.value = this.innerHTML;
}
oul.appendChild(oli);
}
};
function del() {
var scr = document.querySelectorAll('script');
if (scr.length === 0) {
return;
}
document.body.removeChild(scr[scr.length - 1]);
}
</script>