思路
利用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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。