利用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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
jQuery function的正确书写方法
Aug 02 Javascript
JavaScript 命名空间 使用介绍
Aug 29 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
JS函数的几种定义方式分析
Dec 17 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
Vue学习笔记之表单输入控件绑定
Sep 05 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
Echarts如何重新渲染实例详解
May 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 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
Python GAE、Django导出Excel的方法
2008/11/24 Python
用Python设计一个经典小游戏
2017/05/15 Python
python实现大文件分割与合并
2019/07/22 Python
Python3监控疫情的完整代码
2020/02/20 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
文员个人求职自荐信
2013/09/21 职场文书
资料员的岗位职责
2013/11/20 职场文书
编辑硕士自荐信范文
2013/11/27 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
公司聘任书模板
2014/03/29 职场文书
丧事主持词大全
2014/04/02 职场文书
小学生寒假家长评语
2014/04/16 职场文书
第二课堂活动总结
2014/05/07 职场文书
工厂车间标语
2014/06/19 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
运动会通讯稿50字
2015/07/20 职场文书
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis