jsonp跨域实现百度首页联想功能

思路

利用jsonp，无需后端处理的的跨域能力，在控制台寻找相应的处理输入框的后台接口，根据input框的内容，利用jsonp向后台拿数据，然后添加到页面下，然后根具后台返回的数据，用一组li展示在搜索框下面，并且li使用的是a标签包裹，链接到相应联想词的搜索结果页面

代码片段

    <script>
      var timer = null // 为防抖动设置的timer
      var domInput = document.getElementById('input')
      var domul = document.getElementsByTagName('ul')[0]
      domInput.oninput = function (e) {
        clearTimeout(timer)  // 防抖动实现
        timer = setTimeout(function () {
          var domScript = document.createElement('script') // 创建script标签
          domScript.src = 'xxx?wd='+ e.target.value +'&cb=jsonpCb' // 这里指定的后端使用的函数名为jsonpCb，并且是我们自定义的
          document.body.appendChild(domScript) 
        }, 100)
      }
      function jsonpCb (data) { // jsonp的回调函数的实现
        let result = ''
        data.s.forEach(element => {
          result += '<li><a href= ' + 'xxx?wd=' + element + '>' + element +'</a></li>'
        });
        domul.innerHTML = result
      }
    </script>
    

结果截图