怎么样把百度搜索引入自己的网站JS实现

本文实例陈说了jquery中cookie用法。共享给我们供大家参谋,具体如下:

我们都见过这种功用啊

cookie在jquery中有钦命的cookie操作类,上边笔者先来介绍我们在行使cookie操作类时的一部分难题,然后介绍正确的行使方法。

 图片 1

利用JQuery操作cookie时
产生取的值不科学的难题:结果发现cookie有多少个不一致的质量:
名称,内容,域,路线

怎么样把她引入到温馨的网站内部呢?上边大家一块儿来深入分析一下吧

$.cookie; // 读取 cookie $.cookie('the_cookie', 'the_value'); // 存储 cookie $.cookie('the_cookie', 'the_value', { expires: 7 }); // 存储一个带7天期限的 cookie $.cookie('the_cookie', '', { expires: -1 }); // 删除 cookie

行使Ie9的”开辟工具“可能够轻巧到手到,在你输入贰个重大字时百度是怎么获取智能提示,正是有关的重中之重字的。

运用:复制代码
代码如下:$.cookie(“currentMenuID”, menuID卡塔尔(قطر‎;时 未内定域和门路。

协办来看一下吗

具有当域和路径分裂期会发生不一致的cookie复制代码 代码如下:$.cookie;取值时会爆发难点。

 图片 2

故:复制代码
代码如下:$.cookie(“currentMenuID”, “menuID”, { path:
“/”}State of Qatar;进行覆盖。同域下同贰个cookieID对应一个值。

世家能够领会的收看在大家每一遍改进查询框时,百度就是发八个Ajax央浼去调相应的数码

关于cookie的path设置必要注意,如若不设置path:’/’的话,path则会基于目录自动安装[怎么样把百度搜索引入自己的网站JS实现。如:
‘/user’]

地方正是:

$.extend({ /** 1. 设置cookie的值,把name变量的值设为value example $.cookie; 2.新建一个cookie 包括有效期 路径 域名等 example $.cookie('name', ‘value', {expires: 7, path: ‘/', domain: ‘jquery.com', secure: true}); 3.新建cookie example $.cookie; 4.删除一个cookie example $.cookie; 5.取一个cookie值给myvar var account= $.cookie; **/ cookieHelper: function { if (typeof value != 'undefined') { // name and value given, set cookie options = options || {}; if  { value = ''; options.expires = -1; } var expires = ''; if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { var date; if (typeof options.expires == 'number') { date = new Date(); date.setTime + (options.expires * 24 * 60 * 60 * 1000)); } else { date = options.expires; } expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE } var path = options.path ? '; path=' + options.path : ''; var domain = options.domain ? '; domain=' + options.domain : ''; var secure = options.secure ? '; secure' : ''; document.cookie = [name, '=', encodeURIComponent, expires, path, domain, secure].join; } else { // only name given, get cookie var cookieValue = null; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split; for (var i = 0; i < cookies.length; i++) { var cookie = jQuery.trim; // Does this cookie string begin with the name we want? if (cookie.substring ==  { cookieValue = decodeURIComponent(cookie.substring; break; } } } return cookieValue; } } });

大家一见倾心看出来吗,wd=博客 这几个博客
就是本身输入的要紧字,假若您想利用此外的主要字的话,只供给动太的改正wd的值就能够了。

Jquery操作Cookie记录客商查询过信息

此刻大家肯定会这么想,我们是否一旦发三个Get须要,只要每一趟在大家自个儿的网站上查询时动态的发一个Ajax诉求去探问那些地址就可以了呢?是的,

那是两个库克ie数据变动的列表,

但我们八个不用傻着去行使Http央求,因为那样的倡议是从你的服务器发起的,当然百度料定是会封你的。

老是单击查询会蕴藏多个域名,并把最终一回查询的域名放在最上面。本例子最多存款和储蓄拾个,大家能够依附自身意况进行安装

大家须要如何是好工夫防止那么些标题吧?

下在大家一块儿来探望是怎么贯彻的呢

那就独有二个方法了,使用Js,在顾客端推行央求。因为Js是在顾客端发起的,即就是百度封的话,那它封的是具备过量施用你网址的客户,相信百度不会傻到那一点上吧。因为这么他们失去多数客商

先写叁个操作Cookie的JS文件如下

之所以这么些法子应该 是自力更生的

function getid {return (typeof id == 'string') ? document.getElementById : id};function getOffsetTop {var _t = el.offsetTop;while  {if  break;_t += el.offsetTop}return _t};function getOffsetLeft {var _l = el.offsetLeft;while  {if  break;_l += el.offsetLeft}return _l};var currentInput = null;function BoxShow {var input = e;if  {input = e.target ? e.target : e.srcElement;}currentInput = input;FillUrls;var box = getid;if (box.style.display == 'block' && currentInput.id == input.id) {return;}box.style.left =  + 'px';box.style.top =  + (input.offsetHeight - 1)) + 'px';box.style.width = (input.offsetWidth - 4) + 'px';box.style.display = 'block';}function BoxShowUrls;}function InputSetValue {var obj = currentInput;obj.value = val;if (obj.getAttribute {var tags = document.getElementsByTagName;for (var i = 0; i < tags.length; i++) {if (tags[i].getAttribute == 'true' && tags[i] != obj) {tags[i].value = val;}}}BoxHide();}//删除时使用,传入一个要删除的值就可以删除function DelAllSitesValue {var allSites = $.cookie;allSites = allSites.replace;$.cookie("site", allSites, { expires: 7 });FillUrls;}function BoxHide() {if (getid {getid.style.display = 'none';}}//加载列表function FillUrls {var urls = $.cookie;var html = "";if  {var urllist = urls.split;var forlength = 0;var stringcookie;for (var i = urllist.length - 1; i >= 0; i--) {var textval = urllist[i];if  != "" && $.trim != "undefined") {html += "

不过咱们都知晓Js是不可能当先访谈的,而百度又不容许给你越过的接口,也许是权力,我们应当怎么做吧?

” + textval + “

大致,大家地点也看见了,Baidu给我们的是一个Jsonp的数码格式,那么大家就能够直接使用Jsonp的方法去发起Ajax恳求了,因为重返Jsop格式数据的JS是足以当先访问的

“;forlength = forlength + 1;if {$.cookie(“site”, stringcookie, {
expires: 7 });break;} else {stringcookie = textval + “|” +
stringcookie;}}}} else {html += “

我们一起来看下笔者的代码吧。

并未有记录

function FillUrls() {    var strdomin = $.trim($(“#Text1”).val());   
var qsData = { ‘wd’: strdomin, ‘p’: ‘3’, ‘cb’: ‘ShowDiv’, ‘t’:
‘1324113456725’ };    $.ajax({        async: false,        url:
“”,        type: “GET”,        dataType:
‘jsonp’,        jsonp: ‘jsoncallback’,        data: qsData,       
timeout: 5000,        success: function (json) {        },        error:
function (xhr) {            alert(xhr);        }    });}
复制代码
代码不会细小略咱们一看应该就理解了,作者只解释一下那句吧

“}getid.innerHTML = html;}function closeIME {var obj = e.target ?
e.target : e.srcElement;obj.style.imeMode = ‘disabled’;}function OnPaste
{var obj = e.target ? e.target : e.srcElement;setTimeout(“MoveHttp”,
100);}function MoveHttp {var val = getid.value;val = val.replace;if
(val[val.length – 1] == ‘/’State of Qatar {val = val.substring;}getid.value =
val;}function OnKeyup {var obj = e.target ? e.target :
e.srcElement;setTimeout(“addInput”, 200State of Qatar;}function addInput {var obj =
getid;//假使是多个不曾True的input不履行if (obj.getAttribute {if
(obj.value.indexOf {obj.value = obj.value.replace;}var tags =
document.getElementsByTagName;for (var i = 0; i < tags.length; i++){if (tags[i].getAttribute == ‘true’ && tags[i] != obj)
{tags[i].value = obj.value;}}}}function Init() {$[0].style.display =
‘none’;$.each.bind;$.bind(“mousedown”,
BoxShowUrls);$.bind;$.bind;$.bind;$.bind;$[0].setAttribute(‘autocomplete’,
‘off’卡塔尔;}卡塔尔(قطر‎;//抽出Cookievar icpSite = $.cookie
{//收取Cookie不为空的话就给当下框icpSite = icpSite.split.val;}}

 var qsData = { ‘wd’: strdomin, ‘p’: ‘3’, ‘cb’: ‘ShowDiv’, ‘t’:
‘1324113456725’ };

在这里其间还捎带了如此三个功效,正是同期输入多少个输入框的值,如下图

wd是我们要输入的首要字。

假使那些输入框要使用那样的机能只要增添壹天性能为url=”true”就能够了,这样方便
可操作性强,想给那三个框加效果就增进那本性情,不想加的第一手不加url=”true”就OK了。

p  和就无须管了

在使用这几个效果的分界面加多如下代码

cb是怎么着吗?是Ajax重临是一直调用的方法,个是百度回到的数额里面会实践方式举办调用,大家不用做其余的管理

  Init();

只须求写一个方法选择多少就行了

除了这几个之外的JS直接放在叁个Js文件里,援引进来就行了下拉列表是怎么加载的啊?看上面的二个方法就精通了

function ShowDiv(strurls) {    var urls = strurls[“s”];   }
复制代码
urls
那一个正是我们要求的多寡,大家联合来探视调用后归来的数据是怎么着式的啊

function FillUrls {var urls = $.cookie;var html = "";if  {var urllist = urls.split;var forlength = 0;var stringcookie;for (var i = urllist.length - 1; i >= 0; i--) {var textval = urllist[i];if  != "" && $.trim != "undefined") {html += "

ShowDiv({q:”博客”,p:false,s:[“博客中华夏族民共和国”,”天涯论坛”,”博客大巴”,”博客网”,”博客登录”,”博客注册”,”博客寻找”,”博客群发”,”博客
新浪”,”博客群发大师”]});
复制代码
这就是百度回到的多寡,我们只供给s前面包车型大巴多寡就能够了,未来应当清楚我写var
urls = strurls[“s”]; 那句的情致了吗。

” + textval + “

在个时候大家能够本身尝试了。

“;forlength = forlength + 1;if
{//在这里边自个儿只加载10条,大家可以依据自个儿的气象进行调解$.cookie(“site”,
stringcookie, { expires: 7 }卡塔尔(قطر‎;break;} else
{//假设超过十三个的话就取最终11个stringcookie = textval + “|” +
stringcookie;}}}} else {html += “

因为百度只回去的多寡,所以大家还要做多少个智能提供的框,当然也就能够团结定义样子了。先来看看那么些框吧

未曾记录

 <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>
复制代码
体制如下

“}getid.innerHTML = html;}

#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;
}
复制代码

成功了那个之后大家只须要在单击查询时实行仓储Cookie就可以了,看下边的格局

 

function setCookie {var oldcookie = $.cookie;if  {$.cookie(name, value, { expires: 7 });} else {if .indexOf {$.cookie(name, oldcookie + "|" + value, { expires: 7 });} else {$.cookie(name, oldcookie.replace + "|" + value, { expires: 7 });}}FillUrls;}

第一步我们需求一个挂号事件来产生控件的局地功用事件的绑定,当大家输入数据时技术的职能

调用 时这般写复制代码
代码如下:setCookie;好了功用完结。

方法如下

代码写的不是很好,希望咱们多提提建议,大家举办相应改进争取更周全。

//注册对象的平地风波
function Init() {
    $(“#allSitesBoxHdl”)[0].style.display = “none”;
    $(“:text”).each(function () {
        if ($(this)[0].getAttribute(‘url’卡塔尔 == ‘true’State of Qatar{//给持有的text加属性
            $(this).bind(“keyup”, OnKeyup); //按键时
            $(this卡塔尔(قطر‎.bind(“mousedown”, BoxShowUrlsState of Qatar; //鼠标安下时
            $(this卡塔尔国.bind(“mouseout”, BoxHide卡塔尔(قطر‎; //鼠标离开时
            $(this).bind(“paste”, OnPaste); //处理http;//
            $(this)[0].setAttribute(“autocomplete”, “off”);
        }
    });
}
复制代码

Cookie是积攒的客商端的,一个何况只好访问同域名下的Cookie,子域名以内可以互相访谈,只要增多domain属性就能够了,存款和储蓄的章程如下复制代码 代码如下:$.cookie(“domain”, value, {
expires: 7, domain: “7c.com” }卡塔尔;取的年月平素写
$.cookie;就好了,只假使子域名,都这么调用,那样可以达到规定的标准本域名下的Cookie分享的效应。

 

Cookie的灵光应用会给我们的网址带来N多意料之外的效用和效果,大家交换下

本条点子那句 if ($(thisState of Qatar[0].getAttribute(‘url’卡塔尔(قطر‎ == ‘true’卡塔尔国{//给具备的url=true属性的Text加效果

愈来愈多关于jQuery操作cookie相关内容可查阅本站专题:《jQuery的cookie操作技术计算》

的情致是,我们具备引用这一个网页的Text框中,只要有二个天性是url=’true’的都会兑现那么些职能,也正是说大家借使把体制和Js文件引入一下,然后想让那具控件展现就径直助长叁性格质

但愿本文所述对大家jQuery程序设计有着扶植。

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: “”,

        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’State of Qatar == ‘true’卡塔尔{//给持有的url=true属性的Text加效果

            $(this).bind(“keyup”, OnKeyup); //按键时

            $(thisState of Qatar.bind(“mousedown”, BoxShowUrls卡塔尔国; //鼠标安下时

            $(thisState of Qatar.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”
“;
<html xmlns=”;
<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>
复制代码

 

好了大家协同浏览一下效果与利益啊

图片 3

是还是不是很拉风哟。

聊起此地不仅仅是百度如此,像Soso,Sogou等都足以选用同一的主意来兑现。

世家如有兴趣的话能够下载这几个例子看看。下载地址:

假定感到不错的话就给三哥推荐一下啊。

 

 摘自 苏飞—Perky Su
 

怎么着把他引入到和煦的网址内部呢?上边大家一齐来解析一下吧
使用Ie9的开垦工具可能够轻便到手到,在你输入…

发表评论

电子邮件地址不会被公开。 必填项已用*标注