思路

利用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>
    

结果截图

clipboard.png


RickyLong
501 声望27 粉丝

所有事情都有一套底层的方法论,主要找到关键点,然后刻意练习,没有刻意练习,做事情只是低效率的重复


引用和评论

0 条评论