怎麼樣把百度搜索引入自己的網站JS實現(附源代碼)

大傢都見過這種效果吧

 

怎麼樣把他引入到自己的網站裡面呢?下面咱們一起來分析一下吧

使用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"]; 這句的意思瞭吧。

在個時候大傢可以自己試試瞭。

因為百度隻返回的數據,所以我們還要做一個智能提供的框,當然也就可以自己定義樣子瞭。先來看看這個框吧

 <p style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist"        onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">        <ul id="allSitesBoxContent">        </ul>    </p>
復制代碼
樣式如下

#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;' >&nbsp;&nbsp;沒有記錄</li>";

    }

    if ($.trim(html) == "") {

        html = "<li style='font-size: 12px;' >&nbsp;&nbsp;沒有記錄</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" />
    <p style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist"
        onmouseover="this.style.display='block'" onmouseout="this.style.display='none'">
        <ul id="allSitesBoxContent">
        </ul>
    </p>
    <script type="text/javascript">        Init();</script>
    </form>
</body>
</html>
復制代碼

 

好瞭我們一起瀏覽一下效果吧

是不是很拉風啊。

說到這裡不僅僅是百度這樣,像Soso,Sogou等都可以使用同樣的方法來實現。

大傢如有興趣的話可以下載這個例子看看。下載地址:http://files.cnblogs.com/sufei/baiduList.zip

如果感覺不錯的話就給小弟推薦一下吧。

 

 摘自 蘇飛—Perky Su
 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。