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实现简单实用的轮播器
May 23 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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中文汉字验证码
2007/04/08 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
jQuery each()小议
2010/03/18 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
利用python如何在前程无忧高效投递简历
2019/05/07 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
python 读取.nii格式图像实例
2020/07/01 Python
C/C++有关内存的思考题
2015/12/04 面试题
毕业生自我推荐
2013/11/04 职场文书
给小学生的新年寄语
2014/04/04 职场文书
八年级英语教学反思
2016/02/15 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
MySql分区类型及创建分区的方法
2022/04/13 MySQL
vue中data里面的数据相互使用方式
2022/06/05 Vue.js