請穩步我的博客查閱並下載所有資源以及源代碼 http://www.cckan.net
大家都見過這種效果吧
怎麼樣把他引入到自己的網站裏面呢?下面咱們一起來分析一下吧
使用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"
οnmοuseοver="this.style.display='block'" οnmοuseοut="this.style.display='none'">
<ul id="allSitesBoxContent">
</ul>
</div>
複製代碼
樣式如下
View Code
#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文件(這裏還包括一個同時輸入多個文本框的效果)
View Code
//-----------------------------------------實現多個輸入框同時輸入的方法-----------------------------------------------
//得到控件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");
}
});
}
複製代碼
網頁代碼如下:
View Code
<%@ 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"
οnmοuseοver="this.style.display='block'" οnmοuseοut="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
如果感覺不錯的話就給小弟推薦一下吧。
歡迎大家轉載,如有轉載請註明文章來自: http://sufei.cnblogs.com/
簽名:做一番一生引以爲豪的事業;在有生之年報答幫過我的人;並有能力幫助需要幫助的人;
-----------------------------------------------------------推薦文章--------------------------------------------------------