jQuery Jsonp跨域模拟搜索引擎

2019-11-19 16:18:58

字体：大中小

来源：转载

供稿：网友

效果还不错就差加上键盘控制了...

代码如下：

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>迷糊网罗</title>     <style type="text/css">       * {         margin: 0;         padding: 0;       }       form {         position: absolute;         left: 50%;         top: 40%;       }       form input:nth-child(1) {         width: 450px;         height: 34px;         float: left;         font-size: 16px;         text-indent: 0.5em;         outline: none;         box-sizing: border-box;       }       form input:nth-child(1):focus {         border: 1px solid blueviolet;       }       form input:nth-child(2) {         height: 34px;         float: left;         background: blueviolet;         cursor: pointer;         width: 80px;         letter-spacing: 2px;         border: 0;         font-size: 14px;         line-height: 34px;       }       #oul {         position: absolute;         left: 0;         top: 34px;         background: white;         width: 530px;         box-shadow: 3px 3px 5px #F3F3F3;         border: 1px solid #F3F3F3;         box-sizing: border-box;         display: none;       }       #oul li:hover {         background: #F3F3F3;         cursor: pointer;       }     </style>   </head>   <body>     <form action="" method="" name="ss">       <input type="" name="ss" id="txt" value="" />       <input type="button" name="ss" id="btn" value="迷糊网罗" />       <ul id="oul">       </ul>     </form>     <script type="text/javascript">       //https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=&_=1497256697565       //位置调整 习惯就好..       var fm = document.getElementsByTagName('form')[0];       var x = fm.offsetWidth;       var y = fm.offsetHeight;       fm.style.marginLeft = -x / 2 + 'px';       fm.style.marginTop = -y / 2 + 'px';       //获取操作元素       var txt = document.getElementById("txt");       var oul = document.getElementById("oul");       //动态创建js脚本       txt.onkeyup = function(ev) {         var value = this.value;         var newscript = document.createElement("script");         newscript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=walk&_=' + Math.random();         newscript.type = 'text/javascript';         document.body.appendChild(newscript);       }       //设置回调函数       function walk(walkJson) {         if(txt.value == 0) {           oul.style.display = 'none';         } else {           oul.style.display = 'block';           oul.innerHTML = '';           if(walkJson.s.length <= 10) {             for(var i = 0; i < walkJson.s.length; i++) {               var oli = document.createElement('li');               oli.style.height = 25 + 'px';               oli.style.width = 100 + '%';               oli.style.lineHeight = 25 + 'px';               oli.style.textIndent = 9 + 'px';               oli.style.listStyle = 'none';               oli.innerHTML = walkJson.s[i];               oul.appendChild(oli);             }           } else {             for(var i = 0; i < 10; i++) {               var oli = document.createElement('li');               oli.style.height = 25 + 'px';               oli.style.width = 100 + '%';               oli.style.lineHeight = 25 + 'px';               oli.style.textIndent = 9 + 'px';               oli.style.listStyle = 'none';               oli.innerHTML = walkJson.s[i];               oul.appendChild(oli);             }           }         }       }     </script>   </body> </html>

以上所述是小编给大家介绍的jQuery Jsonp跨域模拟搜索引擎的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：jquery DataTable实现前后台动态分页

下一篇：vue router路由嵌套不显示问题的解决方法