利用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 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
解析vue中的$mount
Dec 21 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
vue项目创建步骤及路由router
Jan 14 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 Javascript
浅谈Ant Design Pro 菜单自定义 icon
Nov 17 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默认安装产生系统漏洞
2006/10/09 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
PHP之header函数详解
2021/03/02 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
安装dbus-python的简要教程
2015/05/05 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
详解Django配置JWT认证方式
2020/05/09 Python
眼镜促销方案
2014/03/15 职场文书
好人好事演讲稿
2014/09/01 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
幼儿园六一儿童节活动总结
2015/02/10 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python