这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来 。
JSONP(JSONwith Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。
回调函数：当一个函数作为另一个函数的参数时，那么这个函数就是回调函数。
效果如下
代码如下
<script type="text/javascript">
var txt = document.getElementById('text');
var oUl = document.getElementById('list');
var oBtn = document.getElementById('btn');
txt.onkeyup = function () {
oUl.innerHTML = '';
oUl.style.display = 'none';
var val = txt.value;
var oScript = document.createElement('script'); //动态创建script标签
oScript.src =
'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' +
val +
'&cb=callback';
//添加链接及回调函数
document.body.appendChild(oScript); //添加script标签
document.body.removeChild(oScript); //删除script标签
};
//回调函数
function callback(data) {
if (data.s && data.s.length) {
const res = data.s;
res.forEach(function (value) {
var oLi = document.createElement('li');
oLi.innerHTML =
'<a style="display:inline-block;width:100%" href="https://www.baidu.com/s?wd=' +
value +
'">' +
value +
'</a>';
oUl.appendChild(oLi);
});
oUl.style.display = 'block';
}
}
//点击跳转到百度页面，并搜索其中内容
oBtn.onclick = function () {
var val = txt.value;
location.href = 'http://www.baidu.com.cn/s?wd=' + val + '&cl=3';
};
</script>
原创文章，作者：投稿专员，如若转载，请注明出处：https://www.506064.com/n/224256.html
微信扫一扫 
支付宝扫一扫 