百度联想词功能效果如下:

 

代码如下

<!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就会出现提示

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注