下载源代码：http://www.sufeinet.com/forum.php?mod=viewthread&tid=375

大家都见过这种效果吧

怎么样把他引入到自己的网站里面呢？下面咱们一起来分析一下吧

使用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"        onmouseover="this.style.display='block'" onmouseout="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

//-----------------------------------------实现多个输入框同时输入的方法-----------------------------------------------//得到控件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;' >&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);}//修正URLfunction 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"        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://www.sufeinet.com/forum.php?mod=viewthread&tid=375

如果感觉不错的话就给小弟推荐一下吧。

怎么样把百度搜索引入自己的网站JS实现(附源代码)相关推荐

  1. 百度搜索结果中的网站描述

    博友Jarry 给我发了一封邮件,问我为什么Sino Blog 在Google 搜索结果中的网站描述是:"蓝兔的个人博客,是一个以学习和交流为目的的原创写作博客." 而在百度搜索结 ...

  2. 百度搜索公开课：网站死链处理指南

    最近松松编辑杰哥了解到,百度搜索近日在百度搜索线上公开课中针对网站运营中常见的新网站抓取,内容更新和死链处理等问题做出了详细的解答,对于一些新手站长们运营网站很有帮助! 以下是根据百度官方直播解答整理 ...

  3. 如何在百度搜索到自己的网站？新站必看

    以下步骤,亲测有效 步骤一: 打开这个网页  http://www.baidu.com/search/url_submit.html 提交网址 如图: 步骤二: 提交成功后,会弹出一个  " ...

  4. 如何在百度搜索到自己的网站，加快百度的关键字录入

    第一,确认新建的网站没有文件禁止百度搜索蜘蛛爬行,百度就会主动收录,但是这个时间比较久 第二,我们主动把网站地址提交给百度,让其搜索引擎快速收录网站,百度网址提交地址:http://www.baidu ...

  5. 解决：写的CSDN博客百度搜索不到 （网站/博客/链接 提交百度检索方法）

    往往发布了一篇博客,会发现按照博客标题搜索,无法在百度搜索到自己的这篇文章. 这时,我们在以下网站提交我们的博客链接即可: 链接提交_加快网站内容抓取,快速提交数据工具_站长工具_网站支持_百度搜索资 ...

  6. 小技巧 - 如何在百度搜索到自己的网站（新站必看）？

    当我们新建了一个网站后,那该如何能在百度等搜索引擎上搜索到自己的网站? 方法 / 步骤 1.理论上是如果你没有在文件里设置禁止百度蜘蛛爬行的话,百度会自动收录的.但这个收录可能会等很久.所以一般情况下 ...

  7. php判断百度来路,判断是否通过百度搜索进入你的网站 - 小俊学习网

    一个很有用的php函数,parse_url()函数,可以解析URL,返回其组成部分. array parse_url ( string url ) example: $url = "http ...

  8. 一键seo提交收录_Api提交百度搜索进行文章收录-网站SEO

    网站内容如果想被搜索引擎(百度/google)收录,除了提供robots.txt等着爬虫来爬以外,如果想最快的被百度收录可以在熊掌号平台进行注册,可以通过在平台上进行页面改造.站点同步等方式提高百度收 ...

  9. 怎么让自己的网站在百度搜索中带图片显示

    原文地址:https://zhidao.baidu.com/question/747416635153908252.html 方法如下:1.注册并登录百度站长平台zhanzhang.baidu.com ...

最新文章

  1. insight切换窗口 source_Source Insight函数调用关系显示设置(示例代码)
  2. python如何遍历文件夹中的所有图片_python实现遍历文件夹图片并重命名
  3. IdentityServer4系列 | 常见术语说明
  4. margin赋值为负值的几种效果（负值像素，负值百分数）
  5. centos 6.9 NTP基准时间服务器配置
  6. BGP——邻居状态机+报文分析（总结）
  7. 设置api密钥_我应该将我的API密钥设置多长时间？
  8. import com.google.common.* 出错，找不到
  9. Python web —— webbrowser + feedparser 网络爬虫刷博器
  10. 可视化大数据分析软件要掌握的6个核心技术
  11. 《那些年啊，那些事——一个程序员的奋斗史》——53
  12. --initialize specified but the data directory has files in it. Aborting.
  13. 桌面在计算机哪个文件,计算机中win7系统桌面文件在c盘哪个文件夹
  14. 因为生活简单，所以内心强大
  15. SAP中库存地点MRP应用控制
  16. 基频，倍频，基波，谐波，基音，泛音
  17. e.hash oldCap == 0 详细解读
  18. Oracle数据库基本使用
  19. mysqlclient==1.3.7对应mysql版本_MySQL 5.7.30 的安装/升级（所有可能的坑都在这里）...
  20. 欧美零售商的全渠道实践

热门文章

  1. [Ext JS 4] MVC 应用程序框架
  2. Linux下如何判断磁盘类型,Linux下判断磁盘属于U盘、HDD盘或者SSD盘的方法
  3. centos7解压安装mysql_CentOS7 安装Mysql5.7 解压缩版
  4. php curl post上传图片,php curl上传图片问题
  5. html5中颜色范围,HTML5输入范围：将runnable-track的颜色更改为当前值
  6. 禁止复制php,wordpress禁止复制内容的实现方法
  7. html dom对象简写,HTML DOM 对象
  8. JDK的bug导致Java文件删除不了,必须fgc
  9. apache+mysql+wordpress的安装建站
  10. matlab求微分方程精确解,matlab求微分方程精确解及近似解.ppt