<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度搜索联想词</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
input {
width: 200px;
height: 20px;
position: absolute;
left: 100px;
top: 100px;
}
ul {
display: none;
width: 200px;
border: 1px solid black;
position: absolute;
left: 100px;
top: 124px;
}
ul li {
margin-top: 2px;
background-color: antiquewhite;
}
ul li:hover {
background-color: cadetblue;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<ul></ul>
<script type="text/javascript">
var Oinput = document.getElementsByTagName('input')[0];
var Oul = document.getElementsByTagName('ul')[0];
Oinput.oninput = function () {
var value = this.value;
var Oscript = document.createElement("script");
Oscript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=doJson';
document.body.appendChild(Oscript);
}
function doJson(data) {
var info = data.s,
str = '';
if (info.length > 0) {
Oul.style.display = "block";
info.forEach(function (ele, index) {
str += '<li><a href=https://www.baidu.com/s?wd=' + ele + '>' + ele + '</a></li>';
})
Oul.innerHTML = str;
} else {
Oul.style.display = "none";
}
}
</script>
</body>
</html>