用jsonp跨域调用百度js实现搜索框智能提示

搜索常用于项目，尤其是导航网站。自己做关键词搜索不现实，直接打百度电话是最好的选择。使用jquery.ajax的jsonp方法，可以调用百度的js，得到返回值。当然，美元。getScript还可以跨域调用js。

好了，了解了jsonp的原理和应用之后，我们来看看百度的智能提示是怎么做的。看看chrome调试窗口下百度的搜索请求。当输入关键字“a”时，请求如下：

用firebug查看请求的参数，如图所示：

请求方式：get request request参数：wd显然是要搜索的关键字；Cb是请求回来的处理功能，名字可以随便给；t是防止缓存的时间戳；p不知道什么意思，每个请求给3就行；希德不知道这意味着什么。如果你想要，你可以要。该值是上面截图的值。

请求地址和参数是已知的，所以写下下面的js来测试你是否能得到关键词提示(源代码中的test.html页面):

var qsData={ 'wd': 'a '，' p': '3 '，' cb': 'getData '，' t': new Date()。get毫秒()。toString()}；$.ajax({ async: false，URL : ' http://improvement . Baidu.com/su '，type: 'GET '，dataType: 'jsonp '，jsonp: 'jsoncallback '，data: qsData，timeout: 5000，success:函数(json) { }，error:函数(xhr){ })；QsData封装了所有请求发送的参数；GetData是一个用户定义的名称，用于处理返回的关键字(以下示例代码将请求的关键字打印到FireBug的控制台上):

函数getData(data){ var Info=data[' s ']；//获取异步数据console . log(Info)；}监控文本框，实时发送ajax请求并获取数据，如下所示：

好了，测试可用，真的可以得到关键词提示。但是你不能把一堆关键词放在前台让用户看到，至少像百度一样，你可以用鼠标和键盘方向键从候选词框中选词。最重要的是编写完整的智能提示并配合鼠标键盘操作候选词(源代码中的index.html页面)，实现以下功能：1。立即监控字母键和数字键，按下时发送ajax请求(也可以设置延迟发送请求，源代码中有)；同时监控空格、退格、删除、回车等按键；2.将鼠标移动到弹出的图层中，高亮显示选中的线条，点击即可转到屏幕；3.按键盘上下箭头键选择候选词，回车提交跳转到百度搜索页面；4.点击页面其他部分自动隐藏弹出框；5.按ESC键隐藏弹出框

用于监控鼠标和键盘输入的Js(在autocomplete.js源代码中有更详细的注释):

var timeoutId//延迟请求服务器var高亮指数=-1；//高亮标记$(function () { $('#searchText ')).key up(function(event){ var myEvent=event | | window。事件；var键码=myevent。密钥代码；//控制台。日志(键码)；//监控键盘if(键码=65键码=90 | |键码=48键码=57 | |键码=96键码=111 | |键码=186键码=222 | |键码==8 | |键码==46 | |键码==32 | |键码==13){//延时操作//clear time out(timeoutId)；//timeoutId=setTimeout(函数(){//timeoutId=fill URL()；//}，500)填充URL()；//异步请求if (highlightindex！=-1){突出显示索引=-1；} } else if(键码==38 | |键码==40){ if(键码==38){//向上var autoNodes=$('#auto ').children(' div ')if(突出显示索引！=-1){自动编码。突出显示指数.css(“”背景色','白色');高亮索引-；} else { highlight index=autonodes。长度-1；} if(高亮索引==-1){高亮索引=自动编码。长度-1；} autoNodes.eq(highlightindex).css(“”背景色，' # ebeb ')；var ComText=autonodes。突出显示指数.text()；$('#searchText ').val(ComText)；} if (keyCode==40) { //向下var autoNodes=$('#auto ').children(' div ')if(突出显示索引！=-1){自动编码。突出显示指数.css(“”背景色','白色');} highlight indexif(highlight index==autonodes。长度){突出显示索引=0；} autoNodes.eq(highlightindex).css(“”背景色，' # ebeb ')；var ComText=autonodes。突出显示指数.text()；$('#searchText ').val(ComText)；} } else if (keyCode==13) { //回车if (highlightindex！=-1) { var comText=$('#auto ').隐藏()。儿童(' div ').eq(highlightindex).text()；高亮索引=-1；$('#searchText ').val(ComText)；} else { $('#auto ').hide()；$('#searchText ').获取(0)。blur()；} } else if (keyCode==27) { //按下转义字符隐藏弹出层if ($('#auto ').是(' :可见'){ $(' # auto ').hide()；} } });最后实现效果展示。可以鼠标选择候选词也可以键盘方向键选择，点击即可上屏，回车直接跳到百度页面：

源码下载：http://夏仔。JB 51。net/201608/马援/baidusearch(jb51.net ).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。