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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery异步提交表单实例
May 30 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现简单评论区功能
Oct 26 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
PHP Document 代码注释规范
2009/04/13 PHP
ThinkPHP控制器间实现相互调用的方法
2014/10/31 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
AngularJS语法详解
2015/01/23 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
详解Python编程中基本的数学计算使用
2016/02/04 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
python中altair可视化库实例用法
2021/01/26 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
Element实现动态表格的示例代码
2021/08/02 Javascript
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android