该功能的实现主要使用jsonp跨域访问，然后通过回调函数显示搜索到的相关内容。
JSONP(带填充的JSON)是一个非官方的协议，它允许整合在服务器端的脚本标签返回到客户端，以javascript回调的形式实现跨域访问(这只是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://***.baidu.com/s?wd=' + value + '">' + value + '</a>'; oUl.appendChild(oLi); }); oUl.style.display = 'block'; } } //点击跳转到百度页面，并搜索其中内容 oBtn.onclick = function () { var val = txt.value; location.href = 'http://***.baidu.com.cn/s?wd=' + val + '&cl=3'; }; </script>
本文来自安安分分做我自我投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/647332.html
微信扫一扫 
