抓取百度关键字智能提示，抓取百度关键字提示实现(附源代码) - 苏飞论坛

上传

点击文件名下载附件
大家都见过这种效果吧

(, 下载次数: 589)

上传

点击文件名下载附件
怎么样把他引入到自己的网站里面呢？下面咱们一起来分析一下吧
使用Ie9的”开发工具“可可以轻松获取到，在你输入一个关键字时百度是怎么获取智能提示,就是相关的关键字的。
一起来看一下吧
(, 下载次数: 354)

上传

点击文件名下载附件
大家可以清楚的看到在我们每次修改查询框时，百度就是发一个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是可以跨越访问的
大家一起来看下我的代码吧。

[HTML] 纯文本查看 复制代码



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返回是直接调用的方法，个是百度返回的数据里面会执行方法进行调用，我们不用做任何的处理
只需要写一个方法接受数据就行了

[HTML] 纯文本查看 复制代码

function ShowDiv(strurls) {

    var urls = strurls["s"];

   }

urls 这个就是我们需要的数据，我们一起来看看调用后返回的数据是什么样式的吧
ShowDiv({q:"博客",p:false,s:["博客中国","博客园","博客大巴","博客网","博客登陆","博客注册","博客搜索","博客群发","博客新浪","博客群发大师"]});
这就是百度返回的数据，我们只需要s后面的数据就行了，现在应该明白我写var urls = strurls["s"]; 这句的意思了吧。
在个时候大家可以自己试试了。
因为百度只返回的数据，所以我们还要做一个智能提供的框，当然也就可以自己定义样子了。先来看看这个框吧

[HTML] 纯文本查看 复制代码

<div style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist"

        onmouseover="this.style.display='block'">

        <ul id="allSitesBoxContent">

        </ul>

    </div>

样式如下

[CSS] 纯文本查看 复制代码

#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;

}

第一步我们需要一个注册事件来完成控件的一些效果事件的绑定，当我们输入数据时才能的效果
方法如下

[HTML] 纯文本查看 复制代码



//注册对象的事件

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

[] 纯文本查看 复制代码

;

    var html = "";

    if (urls) {

        var urllist = urls;

        var forlength = 0;

        var stringcookie;

        for (var i = urllist.length - 1; i >= 0; i--) {

            var textval = urllist;

            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.getAttribute('url') == 'true' && tags != obj) {

                tags.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");

        }

    });

}

网页代码如下：

[HTML] 纯文本查看 复制代码

<%@ 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'">

        <ul id="allSitesBoxContent">

        </ul>

    </div>

    <script type="text/javascript">        Init();</script>

    </form>

</body>

</html>

好了我们一起浏览一下效果吧
(, 下载次数: 326)

上传

点击文件名下载附件
是不是很拉风啊。
说到这里不仅仅是百度这样，像Soso，Sogou等都可以使用同样的方法来实现。
如果感觉不错的话就给小弟推荐一下吧。

作者: killyouyou 时间: 2012-9-15 14:30
谢谢楼主分享

作者: ReEnter 时间: 2012-9-21 10:57

谢谢楼主分享

作者: feiyu_868 时间: 2012-10-25 10:58

谢谢楼主分享

作者: duoyuan120 时间: 2012-11-21 13:43
谢谢楼主分享

作者: domimasi 时间: 2012-11-21 22:17
为了下载不得不顶

作者: qq296905447 时间: 2012-11-22 02:53
等了一分钟了呵呵

作者: qq296905447 时间: 2012-11-22 03:26
怎么下载不了

作者: 站长苏飞 时间: 2012-11-22 10:12

qq296905447 发表于 2012-11-22 03:26
怎么下载不了

下载成功了吗？

作者: Acoll 时间: 2012-11-30 08:56
不错哦，楼主。。。

作者: weiyz2011 时间: 2012-12-20 14:31
不错，这样省了去建数据库表了

作者: tokyo木 时间: 2013-1-16 14:29
为什么搜索到的提示跟百度的顺序是相反的

作者: xjwebs 时间: 2013-1-23 10:33
这个挺不错的，可以DIY自己的搜索框风格了，数据还跟百度一致，赞！

作者: 站长苏飞 时间: 2013-1-23 10:35

xjwebs 发表于 2013-1-23 10:33
这个挺不错的，可以DIY自己的搜索框风格了，数据还跟百度一致，赞！

呵呵，DIY样式需要自己搞定，我的比较简单

作者: qawan 时间: 2013-2-25 14:20
看一看

作者: 和气生财 时间: 2013-3-6 19:16
我怎么无法下载呀

作者: 站长苏飞 时间: 2013-3-6 20:31

和气生财发表于 2013-3-6 19:16
我怎么无法下载呀

下载了吗？只要你是注册会员就能直接下载

作者: 和气生财 时间: 2013-3-6 20:32
下载了。可我不会用啊。

作者: 站长苏飞 时间: 2013-3-6 20:34

和气生财发表于 2013-3-6 20:32
下载了。可我不会用啊。

文章中不是有说明吗？我只能讲到这个程度了

作者: marcofly 时间: 2013-3-9 17:04
下载下来学习下

作者: simple 时间: 2013-3-9 17:34
{:soso_e100:} 支持下，虽然最后我采用的是AutoCompleteExtender，思路都是一样的~

作者: 站长苏飞 时间: 2013-3-9 17:38

simple 发表于 2013-3-9 17:34
支持下，虽然最后我采用的是AutoCompleteExtender，思路都是一样的~

多谢，如果你的开发已经有Ajax框架在了，最好是使用AutoCompleteExtender还是比较方便的，毕竟是官方的控件，我这种是没引用Ajax框架时使用的，也就是在使用Jquery框架时使用的。你的选择是对的。恭喜了

作者: 一座城池 时间: 2013-7-17 10:37
受教了，学习中…… 楼主威武！！

作者: flychen 时间: 2013-7-17 13:07
真是难得给力的帖子啊，强烈支持楼主。

作者: Joson 时间: 2013-9-5 08:56

作者: 小浪子 时间: 2013-10-17 11:01
智能提示很实用……

作者: 小浪子 时间: 2013-10-17 11:21
这样是等于调用百度的一个接口吗？

作者: 站长苏飞 时间: 2013-10-17 11:24

小浪子发表于 2013-10-17 11:21
这样是等于调用百度的一个接口吗？

是的，算是，因为这些数据是直接从百度调过来的

作者: 清欢 时间: 2013-11-25 20:45
。。。。。

作者: 清欢 时间: 2013-11-25 20:45
受教了，学习中……

作者: 臭屁毛毛 时间: 2013-11-29 16:54
顶非常感谢你帮了我的大忙，真的太感谢你啦！

作者: chinaheart88 时间: 2013-12-3 10:29
有什么用呢？？？？

作者: 坏小孩 时间: 2013-12-17 16:43
膜拜中……

作者: 缘定三生 时间: 2014-3-18 17:39
不错，不过那俩asp是干嘛用的？

作者: 风动鸣 时间: 2014-4-9 19:10
受教了，学习中……

作者: 768952693 时间: 2014-8-17 01:13
受教了，学习中……

作者: ching126 时间: 2014-9-9 22:30
受教了学习中……

作者: gtiweb 时间: 2014-10-16 14:25
强烈支持楼主ing……
好想法,不过自己也可以做下拉联想库

作者: ching126 时间: 2014-11-30 18:50
强烈支持楼主ing……

作者: 永哥New 时间: 2014-11-30 23:05
谢谢楼主分享!

作者: love'点点 时间: 2015-1-11 13:39
我只是路过打酱油的。

作者: 263424205 时间: 2015-10-26 20:00
不错哦，楼主。。。

作者: xing979020 时间: 2015-11-4 21:21
注册账号就是为了回复一下楼主。

作者: g75553 时间: 2016-4-23 10:19
强烈支持楼主ing……

作者: hbxgyyw 时间: 2017-6-2 14:27
真是难得给力的帖子啊。

作者: qc731600347 时间: 2018-12-6 19:38
厉害，顶顶顶

欢迎光临苏飞论坛 (http://www.sufeinet.com/)