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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 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
Protoss魔法科技
2020/03/14 星际争霸
php smarty模版引擎中的缓存应用
2009/12/02 PHP
PHP的拦截器实例分析
2014/11/03 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python标准异常和异常处理详解
2015/02/02 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python issubclass 和 isinstance函数
2019/07/25 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
土建资料员岗位职责
2014/01/04 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
老人节标语大全
2014/10/08 职场文书
欢送领导祝酒词
2015/08/12 职场文书
如何写好活动总结
2019/06/21 职场文书
餐厅开业活动方案
2019/07/08 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python