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实现鼠标经过显示动画边框特效
Mar 24 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery正则验证注册页面经典实例
Jun 10 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php 读取输出其他文件的实现方法
2016/07/26 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
vue回到顶部监听滚动事件详解
2019/08/02 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
python实现批量获取指定文件夹下的所有文件的厂商信息
2014/09/28 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python读大数据txt
2016/03/28 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python Numpy,mask图像的生成详解
2020/02/19 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
Java多态性的定义以及类型
2014/09/16 面试题
C++面试题目
2013/06/25 面试题
如何转换一个字符串到enum值
2014/04/12 面试题
2019年.net常见面试问题
2012/02/12 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
化妆品促销方案
2014/02/24 职场文书
大专学生求职自荐信
2014/07/06 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
用Python提取PDF表格的方法
2021/04/11 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers
python 使用pandas读取csv文件的方法
2022/12/24 Python