利用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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
Apr 29 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
three.js加载obj模型的实例代码
Nov 10 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP 常见郁闷问题答解
2006/11/25 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
语义化 H1 标签
2008/01/14 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
js 幻灯片的实现
2011/12/06 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python操作MongoDB基础知识
2013/11/01 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
Python assert语句的简单使用示例
2019/07/28 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
numpy.linalg.eig() 计算矩阵特征向量方式
2019/11/29 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
小学毕业感言300字
2014/02/19 职场文书
给全校老师的建议书
2014/03/13 职场文书
中专生自荐信
2014/06/25 职场文书
2014年导购员工作总结
2014/11/18 职场文书
人民检察院起诉书
2015/05/20 职场文书
微观世界观后感
2015/06/10 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
vue3语法糖内的defineProps及defineEmits
2022/04/14 Vue.js