这个功能的实现主要使用了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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 55@qq.com 举报，一经查实，本站将立刻删除。转转请注明出处：https://www.szhjjp.com/n/90739.html