怎么样把他引入到自己的网站里面呢?下面咱们一起来分析一下吧
使用Ie9的”开发工具“可可以轻松获取到,在你输入一个关键字时百度是怎么获取智能提示,就是相关的关键字的。
一起来看一下吧
大家可以清楚的看到在我们每次修改查询框时,百度就是发一个Ajax请求去调相应的数据
地址就是:http://suggestion.baidu.com/su?wd=博客&p=3&cb=window.bdsug.sug&t=1324271669786
大家不难看出来吧,wd=博客 这个博客 就是我输入的关键字,如果你想使用其它的关键字的话,只需要动太的修改wd的值就行了。
这时大家一定会这样想,我们是不是只要发一个Get请求,只要每次在我们自己的网站上查询时动态的发一个Ajax请求去访问这个地址就行了呢?是的,
但大家一个不要傻着去使用Http请求,因为这样的请求是从你的服务器发起的,当然百度肯定是会封你的。
我们需要怎么做才能避免这个问题呢?
那就只有一个方法了,使用Js,在客户端执行请求。因为Js是在客户端发起的,就算是百度封的话,那它封的是所有过量使用你网站的用户,相信百度不会傻到这点上吧。因为这样他们失去很多用户
所以这个方法应该 是成立的
但是大家都知道Js是不能跨越访问的,而百度又不可能给你跨越的接口,或者是权限,我们应该怎么办呢?
简单,我们上面也看到了,Baidu给我们的是一个Jsonp的数据格式,那么我们就可以直接使用Jsonp的方法去发起Ajax请求了,因为返回Jsop格式数据的JS是可以跨越访问的
大家一起来看下我的代码吧。
function FillUrls() {var strdomin = $.trim($("#Text1").val());var qsData = { 'wd': strdomin, 'p': '3', 'cb': 'ShowDiv', 't': '1324113456725' };$.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) {alert(xhr);}}); }
代码很简单大家一看应该就明白了,我只解释一下这句吧
var qsData = { 'wd': strdomin, 'p': '3', 'cb': 'ShowDiv', 't': '1324113456725' };
wd是我们要输入的关键字。
p 和就不用管了
cb是什么呢?是Ajax返回是直接调用的方法,个是百度返回的数据里面会执行方法进行调用,我们不用做任何的处理
只需要写一个方法接受数据就行了
function ShowDiv(strurls) {var urls = strurls["s"];}
urls 这个就是我们需要的数据,我们一起来看看调用后返回的数据是什么样式的吧
ShowDiv({q:"博客",p:false,s:["博客中国","博客园","博客大巴","博客网","博客登陆","博客注册","博客搜索","博客群发","博客 新浪","博客群发大师"]});
这就是百度返回的数据,我们只需要s后面的数据就行了,现在应该明白我写var urls = strurls["s"]; 这句的意思了吧。
在个时候大家可以自己试试了。
因为百度只返回的数据,所以我们还要做一个智能提供的框,当然也就可以自己定义样子了。先来看看这个框吧
<div style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist"onmouseover="this.style.display='block'" onmouseout="this.style.display='none'"><ul id="allSitesBoxContent"></ul></div>
样式如下
#allSitesBoxHdl.classlist {position: absolute;background-color: #F5FBFF;width: 256px;border: 1px solid #C9E4F4;top: 28px;left: 0;text-align: left;font-size: 14px;line-height: 30px;padding: 1px; } #allSitesBoxHdl.classlist li {display: inline; } #allSitesBoxHdl.classlist li.lis a {text-decoration: none;height: 30px;width: 210px;float: left;padding-left: 8px;color: #666; } #allSitesBoxHdl.classlist li.lis a:hover {color: #016493;background-color: #edf6fb; } #allSitesBoxHdl.classlist li.lis a:active {color: #016493;background-color: #edf6fb; } #allSitesBoxHdl.classlist li.lis input {cursor: pointer;color: #FF6600;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;height: 22px;margin: 4px;line-height: 22px;float: right;background: #fff; } .wena {color: #666;font-size: 12px;height: 30px;line-height: 30px;width: 250px;float: left; }
第一步我们需要一个注册事件来完成控件的一些效果事件的绑定,当我们输入数据时才能的效果
方法如下
//注册对象的事件 function Init() {$("#allSitesBoxHdl")[0].style.display = "none"; $(":text").each(function () {if ($(this)[0].getAttribute('url') == 'true') {//给所有的text加属性$(this).bind("keyup", OnKeyup); //按键时$(this).bind("mousedown", BoxShowUrls); //鼠标安下时$(this).bind("mouseout", BoxHide); //鼠标离开时$(this).bind("paste", OnPaste); //处理http;//$(this)[0].setAttribute("autocomplete", "off");}}); }
这个方法这句 if ($(this)[0].getAttribute('url') == 'true') {//给所有的url=true属性的Text加效果
的意思是,我们所有引用这个网页的Text框中,只要有一个属性是url='true'的都会实现这个效果,也就是说我们只要把样式和Js文件引入一下,然后想让那具控件显示就直接添加一个属性
url='true'就行了,别的什么也不需要做了。是不是很方便啊。
一起来看看绑定方法的实现吧
下面是整个Js文件(这里还包括一个同时输入多个文本框的效果)
//-----------------------------------------实现多个输入框同时输入的方法----------------------------------------------- //得到控件ID function getid(id) {return (typeof id == 'string') ? document.getElementById(id) : id }; function getOffsetTop(el, p) {var _t = el.offsetTop;while (el = el.offsetParent) {if (el == p) break;_t += el.offsetTop}return _t }; function getOffsetLeft(el, p) {var _l = el.offsetLeft;while (el = el.offsetParent) {if (el == p) break;_l += el.offsetLeft}return _l };var currentInput = null; //修改属性显示列表 function BoxShow(e) {var input = e;if (!input.id) {input = e.target ? e.target : e.srcElement;}currentInput = input;FillUrls();var box = getid("allSitesBoxHdl");if (box.style.display == 'block' && currentInput.id == input.id) {return;}box.style.left = (getOffsetLeft(input)) + 'px';box.style.top = (getOffsetTop(input) + (input.offsetHeight - 1)) + 'px';box.style.width = (input.offsetWidth - 4) + 'px';box.style.display = 'block'; } //显示列表 function BoxShowUrls(e) {var input = e;if (!input.id) {input = e.target ? e.target : e.srcElement;}BoxShow(e); } //给Input设置值 function InputSetValue(val) {var obj = currentInput;obj.value = val;if (obj.getAttribute('url') == 'true') {var tags = document.getElementsByTagName('input');for (var i = 0; i < tags.length; i++) {if (tags[i].getAttribute('url') == 'true' && tags[i] != obj) {tags[i].value = val;}}}BoxHide(); }function BoxHide() {if (getid("allSitesBoxHdl")) {getid("allSitesBoxHdl").style.display = 'none';} } //加载列表 function FillUrls() {var strdomin = $.trim($("#Text1").val());var qsData = { 'wd': strdomin, 'p': '3', 'cb': 'ShowDiv', 't': '1324113456725' };$.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) {alert(xhr);}}); } function ShowDiv(strurls) {var urls = strurls["s"];var html = "";if (urls) {var urllist = urls;var forlength = 0;var stringcookie;for (var i = urllist.length - 1; i >= 0; i--) {var textval = urllist[i];if ($.trim(textval) != "" && $.trim(textval) != "undefined") {html += "<li class=\"lis\"><a href=\"javascript:InputSetValue('" + textval + "');\">" + textval + "</a></li><br/>";}}} else {html = "<li style='font-size: 12px;' > 没有记录</li>";}if ($.trim(html) == "") {html = "<li style='font-size: 12px;' > 没有记录</li>";}getid("allSitesBoxContent").innerHTML = html; } //关闭输入法 function closeIME(e) {var obj = e.target ? e.target : e.srcElement;obj.style.imeMode = 'disabled'; }function OnPaste(e) {var obj = e.target ? e.target : e.srcElement;setTimeout("MoveHttp('" + obj.id + "')", 100); } //修正URL function MoveHttp(id) {var val = getid(id).value;val = val.replace("http://", "");if (val[val.length - 1] == '/') {val = val.substring(0, val.length - 1);}getid(id).value = val; } function OnKeyup(e) {var obj = e.target ? e.target : e.srcElement;setTimeout("addInput('" + obj.id + "')", 200); } //赋值 function addInput(id) {var obj = getid(id);//如果是一个没有True的input不执行 if (obj.getAttribute('url') == 'true') {if (obj.value.indexOf('。') > 0) {obj.value = obj.value.replace('。', '.');}var tags = document.getElementsByTagName('input');for (var i = 0; i < tags.length; i++) {if (tags[i].getAttribute('url') == 'true' && tags[i] != obj) {tags[i].value = obj.value;}}}FillUrls(); } //注册对象的事件 function Init() {$("#allSitesBoxHdl")[0].style.display = "none"; $(":text").each(function () {if ($(this)[0].getAttribute('url') == 'true') {//给所有的url=true属性的Text加效果 $(this).bind("keyup", OnKeyup); //按键时 $(this).bind("mousedown", BoxShowUrls); //鼠标安下时 $(this).bind("mouseout", BoxHide); //鼠标离开时 $(this).bind("paste", OnPaste); //处理http;// $(this)[0].setAttribute("autocomplete", "off");}}); }
网页代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title></title><link href="Scripts/StyleSheet.css" rel="stylesheet" type="text/css" /><script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script><script src="Scripts/JScript2.js" type="text/javascript"></script> </head> <body><form style="text-align: center" id="form1" runat="server"><br /> <br /> <br /> <br /> <br /> <br /> <br /><input style="width:500px;" url="true" id="Text1" type="text" /><br/><input style="width:500px;" id="Text2" type="text" /><div style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist"onmouseover="this.style.display='block'" onmouseout="this.style.display='none'"><ul id="allSitesBoxContent"></ul></div><script type="text/javascript"> Init();</script></form> </body> </html>
好了我们一起浏览一下效果吧
是不是很拉风啊。
说到这里不仅仅是百度这样,像Soso,Sogou等都可以使用同样的方法来实现。
大家如有兴趣的话可以下载这个例子看看。下载地址:http://download.csdn.net/detail/sufei1013/3949230