<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrapper {
position: absolute;
margin-left: -260px;
left: 50%;
top: 30%;
}
#btn {
560px;
padding: 10px 10px;
border: 1px solid rgb(45, 129, 240);
}
</style>
</head>
<body>
<div class="wrapper">
<input type="text " id="btn">
<ul id="oUl">
</ul>
</div>
</body>
</html>
<script>
function $(id){
return document.getElementById(id);
}
$("btn").onkeyup = function () {
var value = this.value;
console.log(value);
}
$("btn").onkeyup = function () {
var value = this.value;
// console.log(value);
var oScript = document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa'
document.body.appendChild(oScript)
}
function aa(data) {
console.log(data);
}
function aa(data) {
console.log(data);
$("oUl").style.display = 'block';
var list = data.s;
var str = '';
list.forEach(function (ele, index) {
str += '<li>' + ele + '</li>';
});
$("oUl").innerHTML = str;
}
$("btn").onkeyup = function () {
var value = this.value;
if (value) {
var oScript = document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=aa'
document.body.appendChild(oScript);
oScript.remove();//大家在之前会发现，随着你输入的东西越多，你创建的script标签就越多，我们在获取到它后直接移除即可。
} else if(value == 0){
$("oUl").style.display = 'none';
}
}
function aa(data) {
$("oUl").style.display='block';
var list = data.s;
var str = '';
if (list.length > 0) {
list.forEach(function (ele, index) {
str += '<li><a href ="https://www.baidu.com/s?wd=' + ele + '">' + ele + '</li>';
})
$("oUl").innerHTML = str;
}else {
$("oUl").style.display = 'none';
}
}
</script>