利用jsonp跨域调用百度js实现搜索框智能提示


Posted in Javascript onAugust 24, 2016

项目中常常用到搜索,特别是导航类的网站。自己做关键字搜索不太现实,直接调用百度的是最好的选择。
使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js。 

ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的
在chrome的调试窗口下看看百度搜索发出的请求。当输入关键字“a”,请求如图: 

利用jsonp跨域调用百度js实现搜索框智能提示

用firebug看下请求的参数,如图:

利用jsonp跨域调用百度js实现搜索框智能提示

请求方式:get请求
请求参数:wd明显是要搜索的关键字;cb是请求回来的处理函数,名字可以随便给;t是时间戳,防止缓存的;p不知道什么意思,每次请求都给3就可以了;sid也不知道什么意思,不要也可以请求,如果想要也可以带上,值就是上面截图的值。

 请求地址和参数都知道了,于是写下如下js测试是否可以拿到关键字提示(源码里的test.html页面): 

var qsData = { 'wd': ‘a', 'p': '3', 'cb': 'getData', 't': new Date().getMilliseconds().toString() };
  $.ajax({
   async: false,
   url: "http://suggestion.baidu.com/su",
   type: "GET",
   dataType: 'jsonp',
   jsonp: 'jsoncallback',
   data: qsData,
   timeout: 5000,
   success: function (json) {
   },
   error: function (xhr) {
   }
 });

qsData封装所有请求要发送的参数;getData是自定义的名称,用于处理返回的关键字(以下示例代码把请求回来的关键字打印到了FireBug的控制台): 

function getData(data) {
   var Info = data['s']; //获取异步数据
   console.log(Info);
  }

监控下文本框,实时的发送ajax请求并拿回数据是这样的: 

利用jsonp跨域调用百度js实现搜索框智能提示

ok,测试可用,的确可以拿到关键字提示。但是总不能把一堆关键字放到前台让用户看,至少得跟百度一样,可以用鼠标和键盘方向键从候选词框里选词吧。
最关键的来了,现在开始写完整的智能提示并配合鼠标和键盘对候选词的操作(源码里的index.html页面),实现如下功能:
 1.即时监控字母键和数字键,按下就发ajax请求(也可以设置延迟发请求,源码里有);同时监控空格、退格、Delete、Enter等键;
 2.鼠标移入弹出层高亮选中的行,点击可上屏;
 3.按键盘上下方向键可以选择候选词,回车提交跳转到百度搜索页面;
 4.点击页面其他部位自动隐藏弹出框;
 5.按ESC键隐藏弹出框 

 监控鼠标和键盘输入的js(autoComplete.js 源码里有更详细的注释): 

var timeoutId; //延迟请求服务器
var highlightindex = -1; //高亮标记
$(function () {
 $("#searchText").keyup(function (event) {
  var myEvent = event || window.event;
  var keyCode = myEvent.keyCode;
  //console.log(keyCode);

  //监控键盘
  if (keyCode >= 65 && keyCode <= 90 || keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 111 || keyCode >= 186 && keyCode <= 222 || keyCode == 8 || keyCode == 46 || keyCode == 32 || keyCode == 13) {
   //延时操作
   //clearTimeout(timeoutId);
   //timeoutId = setTimeout(function () {
   //   timeoutId = FillUrls();
   //    }, 500)
   FillUrls(); //异步请求
   if (highlightindex != -1) {
    highlightindex = -1;
   }
  }
  else if (keyCode == 38 || keyCode == 40) {
   if (keyCode == 38) {  //向上
    var autoNodes = $("#auto").children("div")
    if (highlightindex != -1) {
     autoNodes.eq(highlightindex).css("background-color", "white");
     highlightindex--;
    } else {
     highlightindex = autoNodes.length - 1;
    }
    if (highlightindex == -1) {
     highlightindex = autoNodes.length - 1;
    }
    autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
    var comText = autoNodes.eq(highlightindex).text();
    $("#searchText").val(comText);
   }
   if (keyCode == 40) { //向下
    var autoNodes = $("#auto").children("div")
    if (highlightindex != -1) {
     autoNodes.eq(highlightindex).css("background-color", "white");
    }
    highlightindex++;
    if (highlightindex == autoNodes.length) {
     highlightindex = 0;
    }
    autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
    var comText = autoNodes.eq(highlightindex).text();
    $("#searchText").val(comText);
   }
  } else if (keyCode == 13) {  //回车
   if (highlightindex != -1) {
    var comText = $("#auto").hide().children("div").eq(highlightindex).text();
    highlightindex = -1;
    $("#searchText").val(comText);
   } else {
    $("#auto").hide();
    $("#searchText").get(0).blur();
   }
  } else if (keyCode == 27) { //按下Esc 隐藏弹出层
   if ($("#auto").is(":visible")) {
    $("#auto").hide();
   }
  }
 });

最后实现效果展示。可以鼠标选择候选词也可以键盘方向键选择,点击即可上屏,回车直接跳到百度页面:

利用jsonp跨域调用百度js实现搜索框智能提示

源码下载:http://xiazai.3water.com/201608/yuanma/baidusearch(3water.com).rar

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

Javascript 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
js实现返回顶部效果
Mar 10 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
探索node之事件循环的实现
Oct 30 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 #Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 #Javascript
js友好的时间返回函数
Aug 24 #Javascript
JS转换HTML转义符的方法
Aug 24 #Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
Aug 24 #Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 #Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 #Javascript
You might like
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
2017/03/04 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python 40行代码实现人脸识别功能
2017/04/02 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
python绘制趋势图的示例
2020/09/17 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
汉语言文学职业规划
2014/02/14 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
节约用电通知
2015/04/25 职场文书
永不妥协观后感
2015/06/10 职场文书
公司行政管理制度范本
2015/08/05 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
Python编写可视化界面的全过程(Python+PyCharm+PyQt)
2021/05/17 Python
java设计模式--建造者模式详解
2021/07/21 Java/Android