百度联想词功能效果如下：
代码如下
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>百度联想词功能</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrapper {
width: 1000px;
margin: 100px auto;
}
input {
height: 41px;
width: 100%;
}
ul {
width: 1002px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="text">
<ul id="ul"></ul>
</div>
<script>
var oInput = document.getElementsByTagName('input')[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) {
console.log(data);
var s = data.s;
var str = '';
ul = document.getElementById('ul');
if (s.length > 0) {
s.forEach(function (ele, index, arr) {
str += '<li><a href="https://www.baidu.com/s?wd=' + ele + '">' + ele + '</a></li>';
})
ul.innerHTML = str;
}
}
</script>
</body>
</html>
代码效果如下图，在输入框中输入关键词：jsonp就会出现提示
