利用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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
Javascript实现字数统计
Jul 03 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
详解Vue打包优化之code spliting
Apr 09 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 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编码规范-php coding standard
2007/03/16 PHP
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
js计数器代码
2006/11/04 Javascript
Opacity.js
2007/01/22 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
Ext.MessageBox工具类简介
2009/12/10 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
2017/01/20 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python实现多属性排序的方法
2018/12/05 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
社区国庆节活动方案
2014/02/05 职场文书
学校端午节活动方案
2014/08/23 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
学籍证明模板
2015/06/18 职场文书
初中物理教学反思
2016/02/19 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android