百度联想词功能效果如下:
代码如下
<!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就会出现提示