抓取百度关键字智能提示，抓取百度关键字提示实现

大家都见过这种效果吧

<ignore_js_op>

怎么样把他引入到自己的网站里面呢？下面咱们一起来分析一下吧
使用Ie9的”开发工具“可可以轻松获取到，在你输入一个关键字时百度是怎么获取智能提示,就是相关的关键字的。
一起来看一下吧
<ignore_js_op>

大家可以清楚的看到在我们每次修改查询框时，百度就是发一个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]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18

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]  纯文本查看  复制代码

?

01 02 03

function ShowDiv(strurls) {      var urls = strurls["s"];     }

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

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

?

01 02 03 04 05

< div style = "display: none; position: absolute;" id = "allSitesBoxHdl" class = "classlist"          onmouseover = "this.style.display='block'" >          < ul id = "allSitesBoxContent" >          </ ul >      </ div >

样式如下

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

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

#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]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13

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

[]  纯文本查看  复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

< div style = "font-size:12px;" >[HTML] < em class = "viewsource" style = "cursor:pointer;font-size:12px;color:#369 !important;" num = "6" >纯文本查看</ em > < em class = "copycode" style = "cursor:pointer;font-size:12px;color:#369 !important;" num = "6" >复制代码</ em ></ div >< pre class = "brush: html; gutter: true" ><%@ 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 ></ pre >

好了我们一起浏览一下效果吧
<ignore_js_op>

是不是很拉风啊。
说到这里不仅仅是百度这样，像Soso，Sogou等都可以使用同样的方法来实现。

转载于:https://www.cnblogs.com/my-tzc/articles/3468660.html