.NET:如何用JS将百度搜索添加到网站？-技术开发专区

.NET:如何用JS将百度搜索添加到网站？

作者：Perky Su 编辑：苏巧红 2011-12-20 11:48 来源：博客

　　【IT168技术】如图1所示，相信大家都见过这种效果吧，怎么样把他引入到自己的网站里面呢?下面咱们一起来分析一下。

　　使用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是可以跨越访问的。

　　大家一起来看下我的代码吧。

　　代码很简单大家一看应该就明白了，我只解释一下这句吧

　　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"]; 这句的意思了吧。

　　这个时候大家可以自己试试了。

　　因为百度只返回的数据，所以我们还要做一个智能提供的框，当然也就可以自己定义样子了。先来看看这个框吧

　　样式如下

#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文件(这里还包括一个同时输入多个文本框的效果)

//-----------------------------------------实现多个输入框同时输入的方法-----------------------------------------------
//得到控件IDfunction 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://files.cnblogs.com/sufei/baiduList.zip