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 相关文章推荐
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jquery实现下载图片功能
Jul 18 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
jQuery实现查看图片功能
Dec 01 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
全文搜索和替换
2006/10/09 PHP
php表单处理操作
2017/11/16 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
javascript面向对象编程代码
2011/12/19 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
使用python遍历指定城市的一周气温
2017/03/31 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
python实现字符串和字典的转换
2018/09/29 Python
详解python中的index函数用法
2019/08/06 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python实现图片横向和纵向拼接
2020/03/05 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
keras 简单 lstm实例(基于one-hot编码)
2020/07/02 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
自考毕业自我鉴定范文
2013/10/27 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
出国留学英文自荐信
2015/03/25 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis