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处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jquery检测上传文件大小示例
Apr 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实现文件编码批量转换
2014/03/10 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python实现的递归神经网络简单示例
2017/08/11 Python
python写入已存在的excel数据实例
2018/05/03 Python
浅述python中深浅拷贝原理
2018/09/18 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
使用CSS3制作饼状旋转载入效果的实例
2015/06/23 HTML / CSS
台湾专柜女包:KINAZ
2019/12/26 全球购物
安全生产检查通报
2014/01/29 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
关于保护环境的建议书
2014/08/26 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
学术会议邀请函
2015/01/30 职场文书
女儿满月酒致辞
2015/07/29 职场文书
python - timeit 时间模块
2021/04/06 Python
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
MySQL 全文检索的使用示例
2021/06/07 MySQL
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android