项目中常常用到搜索,特别是导航类的网站。自己做关键字搜索不太现实,直接调用百度的是最好的选择。
使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js。

jsonp快速入门:
【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
关于jquery.ajax的jsonp方法是用以及其error回调函数不能正确执行,请参考园长dudu的文章:
jquery ajax中使用jsonp的限制
jQuery插件jQuery-JSONP使用注意
其他有关jsonp的文章:
利用iframe实现ajax 跨域通信的解决方案

ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的
在chrome的调试窗口下看看百度搜索发出的请求。当输入关键字“a”,请求如图:

用firebug看下请求的参数,如图:


请求方式:get请求
请求参数:wd明显是要搜索的关键字;cb是请求回来的处理函数,名字可以随便给;t是时间戳,防止缓存的;p不知道什么意思,每次请求都给3就可以了;sid也不知道什么意思,不要也可以请求,如果想要也可以带上,值就是上面截图的值。

请求地址和参数都知道了,于是写下如下js测试是否可以拿到关键字提示(源码里的test.html页面):

var qsData = { 'wd': ‘a’, 'p': '', '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: ,
success: function (json) {
},
error: function (xhr) {
}
});

qsData封装所有请求要发送的参数;getData是自定义的名称,用于处理返回的关键字(以下示例代码把请求回来的关键字打印到了FireBug的控制台):

        function getData(data) {
var Info = data['s']; //获取异步数据
console.log(Info);
}

监控下文本框,实时的发送ajax请求并拿回数据是这样的:

ok,测试可用,的确可以拿到关键字提示。但是总不能把一堆关键字放到前台让用户看,至少得跟百度一样,可以用鼠标和键盘方向键从候选词框里选词吧。
最关键的来了,现在开始写完整的智能提示并配合鼠标和键盘对候选词的操作(源码里的index.html页面),实现如下功能:

  1. 即时监控字母键和数字键,按下就发ajax请求(也可以设置延迟发请求,源码里有);同时监控空格、退格、Delete、Enter等键;
  2. 鼠标移入弹出层高亮选中的行,点击可上屏;
  3. 按键盘上下方向键可以选择候选词,回车提交跳转到百度搜索页面;
  4. 点击页面其他部位自动隐藏弹出框;
  5. 按ESC键隐藏弹出框

监控鼠标和键盘输入的js(autoComplete.js 源码里有更详细的注释):

var timeoutId;   //延迟请求服务器
var highlightindex = -; //高亮标记
$(function () {
$("#searchText").keyup(function (event) {
var myEvent = event || window.event;
var keyCode = myEvent.keyCode;
//console.log(keyCode); //监控键盘
if (keyCode >= && keyCode <= || keyCode >= && keyCode <= || keyCode >= && keyCode <= || keyCode >= && keyCode <= || keyCode == || keyCode == || keyCode == || keyCode == ) {
//延时操作
//clearTimeout(timeoutId);
//timeoutId = setTimeout(function () {
// timeoutId = FillUrls();
// }, 500)
FillUrls(); //异步请求
if (highlightindex != -) {
highlightindex = -;
}
}
else if (keyCode == || keyCode == ) {
if (keyCode == ) { //向上
var autoNodes = $("#auto").children("div")
if (highlightindex != -) {
autoNodes.eq(highlightindex).css("background-color", "white");
highlightindex--;
} else {
highlightindex = autoNodes.length - ;
}
if (highlightindex == -) {
highlightindex = autoNodes.length - ;
}
autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
var comText = autoNodes.eq(highlightindex).text();
$("#searchText").val(comText);
}
if (keyCode == ) { //向下
var autoNodes = $("#auto").children("div")
if (highlightindex != -) {
autoNodes.eq(highlightindex).css("background-color", "white");
}
highlightindex++;
if (highlightindex == autoNodes.length) {
highlightindex = ;
}
autoNodes.eq(highlightindex).css("background-color", "#ebebeb");
var comText = autoNodes.eq(highlightindex).text();
$("#searchText").val(comText);
}
} else if (keyCode == ) { //回车
if (highlightindex != -) {
var comText = $("#auto").hide().children("div").eq(highlightindex).text();
highlightindex = -;
$("#searchText").val(comText);
} else {
$("#auto").hide();
$("#searchText").get().blur();
}
} else if (keyCode == ) { //按下Esc 隐藏弹出层
if ($("#auto").is(":visible")) {
$("#auto").hide();
}
}
});

最后实现效果展示。可以鼠标选择候选词也可以键盘方向键选择,点击即可上屏,回车直接跳到百度页面:

源码:点击下载

在线演示地址:点击跳转

使用jsonp跨域调用百度js实现搜索框智能提示,并实现鼠标和键盘对弹出框里候选词的操作【附源码】的更多相关文章

  1. 使用jsonp跨域调用百度js实现搜索框智能提示(转)

    http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...

  2. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  3. jquery中的jsonp跨域调用

                                                    jquery jsonp跨域调用接口

  4. jquery中的jsonp跨域调用(接口)

                                                                           jquery jsonp跨域调用接口

  5. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  6. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  7. 一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)

    JSONP(JSON with Padding)可以看成是JSON的一种“使用模式”,用以解决“跨域访问”的问题,这篇简单的文章给出一个简单的例子用于模拟如何通过jQuery以JSONP的访问调用一个 ...

  8. 各大搜索引擎智能提示API(JSONP跨域实现自动补全搜索建议)

    ---------------------------------------搜索引擎JSONP接口--------------------------------------------- 提示:U ...

  9. ASP.NET Web API 自定义MediaType实现jsonp跨域调用

    代码来自<ASP.NET Web API 2 框架揭秘>一书. 直接上代码: /// <summary> /// 自定义jsonp MediaType /// </sum ...

随机推荐

  1. C语言 第五章 循环结构

    一.for 请在屏幕上输出1000个*号 printf("*************************...."); #include "stdio.h" ...

  2. hibernate笔记--组件映射方法

    假设我们需要保存学生student的信息,student中有一个address属性,我们知道像这种信息其值可能会有多个,就像一个人会有两个以上的手机号,这种情况在hibernate中应该这样配置: 新 ...

  3. ACM-南京理工大学第八届程序设计竞赛-网络赛(2016.04.17)

    A.偷吃糖果Time Limit: 1000Ms Memory Limit: 65536KB Description小鱼喜欢吃糖果.他有两盒糖果,两盒糖果分别仅由小写字母组成的字符串s和字符串t构成. ...

  4. JS函数相关及递归函数的使用

    JS函数相关及递归函数的使用 通用js程序: function 函数名(参数列表) { 函数体 } 可使用alert()输出,也可用return返回值. alert与return区别: functio ...

  5. Fragment基础----信息传递

    如何通过activity来访问fragment的信息呢,我们可以通过一个实例来了解. 使用两个Fragment和一个activity管理 效果图: 第一个fragment来表示输入框 第二个fragm ...

  6. HTML基本元素(一)

    HTML基本元素(一) 1.换行符 <br /> Ps:br 是换行(Break)的缩写,文本会在这个标签的地方换行. 实例: 第一行<br />第二行 2.段落 <p& ...

  7. jQuery效率提升建议

    jQuery简洁通用的方法集把编码者从繁重的工作中解脱出来,也拉低了进入javascript的门槛,初学者对浏览器兼容性一无所知的情况下,几行代码就可以写出超炫的特效.网上有一篇文章转载比较泛滥,已经 ...

  8. JAVA字符串格式化-String.format()的使用

    String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重载形式. form ...

  9. 淡蓝风格的手机登录HTML模板

    查看效果:http://hovertree.com/texiao/mobile/10/ 或者手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> <html ...

  10. 人工智能 - AI

    CNCC 2016 | 人工智能60年浪潮 (原文链接) Intelligence,智能是指生物一般性的精神能力,其三因素理论: 成分智力 Componential Intelligence:思维和对 ...