jQuery Jsonp跨域模拟搜索引擎


Posted in jQuery onJune 17, 2017

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

jQuery Jsonp跨域模拟搜索引擎

代码如下:

<!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 相关文章推荐
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 #jQuery
jQuery ajax动态生成table功能示例
Jun 14 #jQuery
jQuery.form.js的使用详解
Jun 14 #jQuery
You might like
咖啡的种类和口感
2021/03/03 新手入门
实用函数2
2007/11/08 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
又拍云异步上传实例教程详解
2016/04/19 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
HTML颜色选择器实现代码
2010/11/23 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python的pycurl包用法简介
2015/11/13 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
pycharm + django跨域无提示的解决方法
2020/12/06 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
高分子材料与工程专业推荐信
2013/12/01 职场文书
英文留学推荐信范文
2014/01/25 职场文书
大型会议接待方案
2014/03/01 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
python实现简单的聊天小程序
2021/07/07 Python
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技