jquery中用jsonp实现搜索框功能


Posted in Javascript onOctober 18, 2016

前面的话:
    在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统,把之前的源码丢了(前面有个不好的习惯就是把最近在做的东西放桌面)。今天想彻底把这个问题搞明白。

用jquery和ajax进行初步的尝试:

(本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频。自己之前的代码找不到了,之前最先的想法也是来自那里,所以这次直接用那里的代码)

html代码:

<div class="bg-div"> 
  <div class="search-box"> 
   <div class="logo"></div> 
   <form id="search-form"> 
    <input type="text" class="search-input-text" autocomplete="off" name="q" id="search_input" /> 
    <input type="submit" class="search-input-button" value="" id="search_submit"> 
   </form> 
  </div> 
 </div> 
  
 <div class="suggest" id="search-suggest" <!--style="display:none;"-->> 
  <ul id="search-result"> 
   <li>搜索结果1</li> 
   <li>搜索结果2</li> 
  </ul> 
 </div>

css代码:

* { 
 padding: 0; 
 margin: 0; 
} 
 
body { 
  
} 
 
.bg-div{ 
 background-image: url('images/river.jpg'); 
 width: 1228px; 
 height: 690px; 
 margin: 0 auto; 
 position: relative; 
} 
 
.logo { 
 background-image: url('images/logo.png'); 
 width: 107px; 
 height: 53px; 
 float: left; 
 margin: -4px 18px 0 0; 
} 
 
form { 
 float: left; 
 background-color: #fff; 
 padding: 5px; 
} 
 
.search-input-text { 
 border: 0; 
 float: left; 
 height: 25px; 
 line-height: 25px; 
 outline: none; 
 width: 350px; 
 font-size: 16px; 
} 
 
.search-input-button { 
 border: 0; 
 background-image: url('images/search-button.png'); 
 width: 29px; 
 height: 29px; 
 float: left; 
} 
 
.search-box { 
 position: absolute; 
 top: 200px; 
 left: 300px; 
} 
 
#search-suggest { 
 width: 388px; 
 background-color: #fff; 
 border: 1px solid #999; 
 display: none; 
} 
 
.suggest ul { 
 list-style: none; 
} 
 
.suggest ul li { 
 padding: 3px; 
 font-size: 14px; 
 line-height: 25px; 
 cursor: pointer;/*手型*/ 
 /*这段代码去掉
 position:absolute;
 left:----px;
 top:----px;
  */
} 
 
.suggest ul li:hover { 
 text-decoration: underline; 
 background-color: #e5e5e5; 
}

 用jquery来实现效果:
在这之前,我们基本上得到了我们想要的图形效果,但是我们在搜索框内输入想要查询的内容这时候是不会有效果的(一般的搜索框效果都是在键盘输入的时候,下面会显示一部分与之关联的关键搜索信息,然后鼠标移动上去点击后会跳到相应链接)。为了一步步验证我们的思路,我们这里修改一下之前的代码。

1、将li标签中的定位去掉;

2、在html中将li标签设置为隐藏。然后我们进行后面的操作。

思考一:如何在键盘输入的时候就显示相关信息(即:li标签中的内容)?

思路:我们先引入jquery,然后文档加载完后执行一个键盘事件,然后在键盘事件中改变相应的css效果

$(function() {
 //键盘事件
 $("#search_input").bind("keyup", function() {
    $("#search-suggest").show().css({
     top : $("#search-form").offset().top + $("#search-form").height()+10,
     left : $("#search-form").offset().left,
     position : "absolute",
    });
 });
});

这时候,我们在搜索框中输入内容时,下面会跟着显示对应的搜索(模拟)

思考二:如何实现鼠标点击搜索按钮的时候,会搜索相应的内容?

思路:用鼠标点击事件,让鼠标点击后设置一个地址,点击后直接跳到相应地址,代码实现:

//事件代理 --》鼠标点击事件
 $(document).delegate("li", "click", function() {
  var keyword = $(this).text();
  location.href = "http://cn.bing.com/search?q=" + keyword;
 });

思考三:我们如何在搜索框输入数据时,下面会提示相关搜素信息?
思路:我们我们用jquery中的get去实现,参考代码:

var searchText = $("#search_input").val();
  $.get( "http://api.bing.com/qsonhs.aspx?q="+searchText , function(data) {
    console.log(data);
    var d = data.AS.Results[0].Suggests;
    var html = "";
    for(var i = 0; i < d.length; i++) {
     html += "<li>"+d[i].Txt+"</li>";
    }
    $("#search-result").html(html);
   }
   , "json");

到这里,按理来说我们这里应该可以得到我们想要的结果了,但是,找了好久都没有发现哪里错了。视频里面接着描述了用JSONP来进行跨域操作,但是我也按视频中的操作,始终得不到我想要的结果,于是我埋头去看《javascript高级程序设计》,去找关于jsonp的用法

关于jsonp:
    关于jsonp,《javascript高级程序设计》一书中介绍的比较少,下面是我看了之后的归纳。
    jsonp的全写是 json with padding,其出现是为了解决各主浏览器的之间的同源策略的问题,一般来说ServerA 域下面的页面是没有办法与非 ServerA 下面的资源进行沟通,而 Html 的<script>元素是个例外,利用 <script> 这个开源策略,网页可以从其他来源动态获取 json数据,而这种模式就是所谓的 JSONP,用 jsonp 抓到并不是真正意义上 的 json 而是任意的 javascript ,它是直接通过 javascript 编译器编译而不是 json 解释器。更多关于json的知识请点击:http://www.cnblogs.com/foodoir/p/5894760.html查看   

既然书上没有写,那就去网上搜索资源。这里截取一段和文章前面有关的信息的代码:

$.ajax({
    type: "get",
    async: false,
    url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
    dataType: "jsonp",
    jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)    
    jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据   

success: function(json){
     alert(json.price + json.tickets + ' 张。');
    },
    error: function(){
     alert('fail');
    }
   });

通过这段代码来修改我们自己的代码:

$.ajax({
   type: "GET",
   url: "http://api.bing.com/qsonhs.aspx?type=cb&q=" + searchText,
   dataType: "jsonp",
   jsonp: 'cb',
   success: function(data) {
    var d = data.AS.Results[0].Suggests;
    var html = "";

    for(var i = 0; i < d.length; i++) {

     html += "<li>" + d[i].Txt + "</li>";
    }
    $("#search-result").html(html);

    $("#search-suggest").show().css({
     top: $("#search-form").offset().top + $("#search-form").height() + 10,
     left: $("#search-form").offset().left,
     position: "absolute",
    });
   }
  })

更多思考:我们可以在前面增加一些判断,让我们的效果实现起来更完美

if(data == null) {
     $("#search-suggest").hide();
     return false;
    }
    if(data.AS == null) {
     $("#search-suggest").hide();
     return false;
    }
    if(data.AS.Results == null) {
     $("#search-suggest").hide();
     return false;
    }
    if(data.AS.Results[0] == null) {
     $("#search-suggest").hide();
     return false;
    }
    if(data.AS.Results[0].Suggests == null) {
     $("#search-suggest").hide();
     return false;
    }

经过测试前面的代码,发现还有不足,进一步修改代码:

$("#search-form").submit(function() {
  var keyword = $("#search_input").val();
  console.log("word=" + keyword);
  //if (keyword == null) {return false;} 
  location.href = "http://cn.bing.com/search?q=" + keyword;
 });

到这里,我们的效果差不多就出来了,效果截图:

jquery中用jsonp实现搜索框功能

源代码已托管至:http://sandbox.runjs.cn/show/gfdpkysk,点击即可查看。

后面的话:

这些天学习的新东西挺多的,现在有一个想法就是把最近学的东西把它串联起来,做一个综合的效果。参考必应网站,真的有好多东西已经可以做出来了,接下来的一段时间就好好的把自己想要做的效果实现好。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
jQuery中对节点进行操作的相关介绍
Apr 16 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
AngularJS实现多级下拉框
Mar 25 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 #Javascript
浅谈js的异步执行
Oct 18 #Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 #Javascript
微信小程序 教程之模块化
Oct 17 #Javascript
微信小程序 教程之注册页面
Oct 17 #Javascript
微信小程序 教程之注册程序
Oct 17 #Javascript
微信小程序 教程之小程序配置
Oct 17 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php模板引擎技术简单实现
2016/03/15 PHP
Laravel框架基于中间件实现禁止未登录用户访问页面功能示例
2019/01/17 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
2016/12/14 Javascript
Nodejs搭建wss服务器教程
2017/05/24 NodeJs
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
python中的变量如何开辟内存
2018/06/26 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
大四本科生的自我评价
2013/12/30 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
简历中自我评价范文
2015/03/11 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python