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>

結果截圖