利用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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
May 19 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
js实现微信聊天效果
Aug 09 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生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php使用GeoIP库实例
2014/06/27 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
js活用事件触发对象动作
2008/08/10 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
javascript实现日历效果
2019/06/17 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
Python爬取读者并制作成PDF
2015/03/10 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
python实现在一个画布上画多个子图
2020/01/19 Python
django使用JWT保存用户登录信息
2020/04/22 Python
Python读取Excel数据并生成图表过程解析
2020/06/18 Python
python把一个字符串切开的实例方法
2020/09/27 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
基本款天堂:Everlane
2017/05/13 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
《小猪家的桃花树》教学反思
2014/04/11 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
公司处罚决定书
2015/06/24 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫