首页 > 代码库 > 浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自动弹出搜索提示
浅谈asp.net通过本机cookie仿百度(google)实现搜索input框自动弹出搜索提示
对于通过用户输入关键词实现自动弹出相关搜索结果,这里本人给两种解决方案,用于两种不同的情形。
常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的关键字异步调用数据表中的相关数据,显示在一个隐藏div中。
第二种方式也就是我现在着重讨论的方式,适用于单个用户,基于此用户以往的搜索数据来实现搜索提示功能。技术关键是记录下用户的以往搜索数据,写入cookie,然后页面从用户本机cookie调用数据。
ok,下面进入正题。本文主要讲实现步骤,代码可根据自己实际需要更改。
常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的关键字异步调用数据表中的相关数据,显示在一个隐藏div中。
第二种方式也就是我现在着重讨论的方式,适用于单个用户,基于此用户以往的搜索数据来实现搜索提示功能。技术关键是记录下用户的以往搜索数据,写入cookie,然后页面从用户本机cookie调用数据。
ok,下面进入正题。本文主要讲实现步骤,代码可根据自己实际需要更改。
一,如何写入cookie?
为了写入Cookie,他的步骤主要有三步,具体如下:首先就要创建一个HttpCookie对象,通过这个对象来构造一个Cookie,这个对象的名称就是以后产生的Cookie名称。具体如下代码:
HttpCookie cookie = new HttpCookie("MyOnlyCookieName");//定义自己标示性的Cookie名称然后对创建的HttpCookie对象的" Value" 属性分配一个字符串值," Value" 的值就是后来产生的Cookie的值。
如:MyNameCookie.Value = http://www.mamicode.com/"用户给Cookie赋值" ; 如果你想写入的Cookie数值不是一个简单的字符串,而是一个复杂的数据类型,我们知道这些数据类型是不能直接存贮到Cookie中的,因为Cookie中只能存贮字符串。但你可以通过一个变通的方法,就是把这个复杂的数据类型转换成多个字符串,然后把这多个字符串同时赋值给产生的Cookie值,这样Cookie中的内容就丰富了,以后利用Cookie完成的功能也强大了。这时你可能就会明白为什么当你浏览Web服务器,Web服务器会知道你什么时候曾经浏览过,并且曾经待过多长时间等信息了。因为这些信息已经存储到你第一次浏览页面时,Web服务器产生的Cookie中去了。下列代码是把多个字符串存储到Cookie的例子:
cookie [ " 姓名" ] = " 王天"; cookie [ " 性别" ] = " 男"; cookie [ " 年龄" ] = " 26";Cookie有临时的,也有永远的。永久 Cookie 以文件形式存储在计算机上,关闭 Internet Explorer 时仍然保留在计算机上。再次访问该站点时,创建该 Cookie 的网站可以读取。在具体的编程时候,是在写入此Cookie的时候,设定Cookie的生命周期,具体如下代码:
DateTime dtNow = DateTime . Now ;
TimeSpan tsMinute = new TimeSpan ( 1 , 0 , 0 , 0 ) ;
cookie . Expires = dtNow + tsMinute ;
以上代码是设定产生的Cookie的生命期为" 一天" ,你可以通过修改" TimeSpan" 属性来设定产生Cookie的具体生命期。
ok,综合起来,带cookie的操作代码如下
public partial class cookieTest: System.Web.UI.Page { string CookieKye = "jinWebCookies"; protected void Page_Load(object sender, EventArgs e) { } protected void WriteCookie() { CookieKye = readCookie(); HttpCookie cookie = new HttpCookie(CookieKye);//定义cookie对象以及名为Info的项 DateTime dt = DateTime.Now;//定义时间对象 TimeSpan ts = new TimeSpan(30, 0, 0, 0);//cookie有效作用时间. cookie.Expires = dt.Add(ts);//添加作用时间 string searchKey=searchId.Text.Trim(); cookie.Values.Add(searchKey, searchKey);//增加属性 Response.AppendCookie(cookie);//确定写入cookie中 } private string readCookie() { int i=0; while (i >= 0) { if (Request.Cookies[CookieKye+i] == null) { return CookieKye + i; } i++; } return ""; } protected void demoCookie() { //读取cookie if (Request.Cookies[CookieKye] != null) { string temp = Convert.ToString(Request.Cookies["Info"].Value); if (temp == "") { Response.Write("空"); } else Response.Write(temp); } else { Response.Write("error"); } //修改cookie Response.Cookies["Info"]["user"] = "2"; Response.Cookies["Info"].Expires = DateTime.Now.AddDays(1); //删除cookie下的属性 HttpCookie acookie = Request.Cookies["Info"]; acookie.Values.Remove("userid"); acookie.Expires = DateTime.Now.AddDays(1); Response.Cookies.Add(acookie); //删除所有cookie,就是设置过期时间为现在就行了 int limit = Request.Cookies.Count - 1; for (int i = 0; i < limit; i++) { acookie = Request.Cookies[i]; acookie.Expires = DateTime.Now.AddDays(-1); Response.Cookies.Add(acookie); } } protected void Unnamed1_Click(object sender, EventArgs e) { WriteCookie(); }
二,OK,现在是页面端的代码
对于页面端,此处我通过js来读取cookie数据,然后把数据写入提示框首先,是javascript处代码
<script> var setSearchFlag; function showSearch(obj) { clearSearchFlag(); var w3c = (document.getElementById) ? true : false; //w3c 标准 var ns6 = (w3c && (navigator.appName == "Netscape")) ? true : false; //Netscape浏览器 标准的W3C var left, top; if (!ns6) {//判断IE var nLt = 0; var nTp = 0; var offsetParent = obj; while (offsetParent != null && offsetParent != document.body) { nLt += offsetParent.offsetLeft; nTp += offsetParent.offsetTop; offsetParent = offsetParent.offsetParent; } left = nLt; top = nTp + obj.offsetHeight; } else {//标准w3c left = obj.offsetLeft - 5; top = obj.offsetTop + obj.offsetHeight; } $('#showInfo').css('display', 'block'); $('#showInfo').css('top', top); var seach = getCookie("jinWebCookies"); $('#showInfo').html(seach); } function hideSearch(obj) { setSearchFlag = setTimeout(function () { $('#showInfo').css('display', 'none'); }, 100); } function clearSearchFlag() { window.clearTimeout(setSearchFlag); //取消由setTimeout()方法设置的定时器。 } function getCookie(cookieName) {//读取cookie var cookieContent = ''; var cookieAry = document.cookie.split("; "); //得到Cookie数组 for (var i = 0; i < cookieAry.length; i++) { //var cookieName = cookieName + i; var temp = cookieAry[i].split("="); if (temp[0] == cookieName) { cookieContent = unescape(temp[1]); } } return cookieContent; } //写入Cookie //document.cookie = "cookieName=" + escape("要写入的内容"); //cookieName为要写入的Cookie的名称 </script>ok,然后是插入一个搜索框,然后触发js
<form id="form1" runat="server"> <asp:TextBox runat="server" id="searchId" onkeyup="showSearch(this)" onblur="hideSearch(this)"/> <asp:Button runat="server" Text="btn_search AddCookie" onclick="Unnamed1_Click" /> </form> <div style="width:150px;height:300px;border:1px solid #817F82;display:none;position: absolute;" id="showInfo"></div>以上就是本人对此处cookie保存用户搜索数据,然后在用户输入搜索数据弹出提示做出的一些实验。总体方法就是这样,有兴趣的同学可以一起讨论,希望能有一个更有效的实现方式。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。