利用cookie实现搜索记录

有时候我们需要在客户端保存用户的搜索记录，这样一来，当用户再次点击输入框，就可以自动显示用户最近的输入记录。最终效果如下：

1，默认情况下，用户未输入，显示最近的几条搜索记录：

2，用户输入字符，自动匹配最近的搜索记录：

想法是用一个数组存储用户的输入记录，然后放到cookie中，对搜索记录的所有操作都围绕这个数组进行。思路如下：

1，显示：从cookie中拿到这个数组，从后往前显示内容，因为后面的是最新的；

2，添加：首先监测是否存在，如果存在，就删除原来的，然后把新的添加到数组的最后；

3，删除：直接从数组中删除这条记录。然后更新cookie值。

4，清空：直接把数组清空，然后更新cookie值。

详细代码如下：

<script src="../js/jquery-3.1.1.min.js"></script>
<script src="../js/jquery.cookie.js"></script><script type="text/javascript">var save_max_len=50;//最多保存50条搜索记录，超过50条，新的记录覆盖最旧的var display_max_len=7;//下拉框最多显示7条记录$(document).ready(function() {showHistory();//监听搜索框的文本输入，去cookie中查询相关的搜索记录$("#search_text").bind('input propertychange', function() { showHistory();});//历史记录点击事件$(document).delegate("div.details", "click", function() {var search_text = $(this).text();$("#search_text").val(search_text);search(search_text);});});//显示历史记录function showHistory() {var data = new Array();var cookie=$.cookie("search_history");//获取cookieif(cookie!=null){data = JSON.parse(cookie); //从cookie中取出数组}$("#history").empty();//清除原来的显示内容，以免重复显示var str=$("#search_text").val();if(!str){str="";}if (data != null) {var len = data.length>display_max_len?display_max_len:data.length;//显示时只显示特定的条数var limit = data.length-len-1;for (var i = data.length-1; i >limit ; i--) {if(data[i].indexOf(str)>-1){//动态创建历史记录条目var liHtml = '<li><div class="details"><i class="search_icon"></i>';liHtml += '<b class="history_item"><a href="javascript:;" οnclick="itemClick('+data[i]+')">'+data[i]+'</a></b>';liHtml += '</div>';liHtml += '<i class="icon-del-fr"></i>';liHtml += '</li>';$("#history").append(liHtml);}}}}//添加历史记录function addHistory(str) {var data = new Array();var cookie=$.cookie("search_history");if(cookie!=null){data = JSON.parse(cookie);}//如果历史记录中有，就先删除，然后再添加（保持最近搜索的记录在最新），否则，直接添加var index=-1;if(data){index=data.indexOf(str);}if(index>-1){data.splice(index,1);//删除原来的}//最多保留save_max_len条记录，超过最大条数，就把第一条删除if(data && data.length==save_max_len){data.splice(0,1);}data.push(str);$.cookie('search_history', JSON.stringify(data), {expires : 365});//设置一年有效期}//删除历史记录function deleteHistory(index){var data = new Array();data = JSON.parse($.cookie("search_history")); data.splice(index,1);$.cookie('search_history', JSON.stringify(data), {expires : 365});showHistory();}//清空历史记录function emptyHistory(){$.cookie('search_history', null, {expires : -1});showHistory();}//点击搜索记录条目function itemClick(str){$("#search_text").val(str);search(str);}//点击搜索图标function toSearch() {var search_text = $("#search_text").val();if(!search_text){return;}addHistory(search_text);//添加历史记录search(search_text);//搜索}//调用后台进行搜索function search(search_text){window.location.href="https://www.csdn.net";}
</script>
</head>
<body><!-- 头部搜索框及按钮 --><div class=""><div class=""><div class=""><a href="javascript:;" class="">取消</a><div class=""><input placeholder="请输入关键词信息搜索" class="" id="search_text"><a class="" οnclick="toSearch()"></a></div></div></div>
</div>
<div class=""></div>
<div class=""><!-- 头部标题 --><div class="search_head"><ul class=""><li><b class="history_item">搜索记录</b><a href="javascript:;" οnclick="emptyHistory()" class=""></a></li></ul></div><!-- 用来显示搜索条目 --><div><ul id="history"></ul></div></div>
</body>

利用cookie实现搜索记录相关推荐

搜索2.0：利用用户点击记录改善搜索结果
/*版权声明:可以任意转载,转载时请务必标明文章原始出处和作者信息 .*/ 搜索2.0:利用用户点击记录改善搜索结果 Author:张俊林 timestamp:2007年7月现在是WEB2.0时代了 ...
Python 利用 cookie 模拟登录，爬取指定关键词的淘宝商品信息
Python 利用 cookie 模拟登录,爬取指定关键词的淘宝商品信息-Selenium 1. 本文目标由于淘宝网站的不断更新,以前的爬取方法都无法重现,必须需要登录淘宝网站才可以进行搜索商品.所 ...
前端实现搜索记录功能
代码乱掉了...移步得益于H5的API,前端可以很方便的存储数据,除了cookie,新增的sessionStorage.localStorage可以在用户本地存储数据,这可以让前端实现一些,以前只能 ...
计算机搜索记录为什么删除不掉,删除电脑上搜索引擎记录的解决方法
现如今,网络的发展给我们的生活带来了很多的便利,让我们的生活与外界紧密联系在一起.但是也给我们带来了不少的困扰,我们的隐私安全得不到保障.特别是我们在利用浏览器搜索东西的记录,几乎是完全曝光的.因此, ...
利用BFS广度优先搜索还原二阶魔方
利用BFS广度优先搜索还原二阶魔方采用BFS深度优先搜索算法进行了对于魔方求解问题的建模,并且利用C++代码进行了算法实现,能够实现输入魔方状态,自动输出解法的效果. BFS是图论中一种基本的搜索算 ...
如何删除计算机某个盘搜索记录,怎么快速删除搜索记录如何随意删除指定的那条记录...
如何快速删除搜索记录,具体详细内容如下所示我们网吧的时候如果不小心在IE上留下很多隐私的的搜索记录到时候你想哭都来不及,所以我们平时要养成一个好的习惯,我朋友就碰到一次他是一个女同志,有一次他在网吧 ...
python爬虫qq好友信息,GitHub - equationl/QQzone_crawler: QQ 空间动态爬虫，利用cookie登录获取所有可访问好友空间的动态保存到本地...
关于 Edit by equationl 优先在码云上更新该项目修改自 xjr7670 的 QQzone_crawler 原作者说明: QQ空间动态爬虫修改了什么? 爬取完整的评论列表爬取点 ...
如何删除百度搜索记录怎么删除
很多朋友在使用百度搜索关键词时,发现百度会记录之前搜索的关键词,这样当你再次搜索相同的关键词时,可以快速显示,方便用户搜索,这为用户使用百度搜索引擎搜索关键词提供了方便,但也带来了另外一个问题,就是可 ...
【034】百度指数–实时百度热词搜索记录和用户画像
对市场运营岗和品牌策划岗来说,市场群体目前的潮流风向.对品牌的舆论感知.群体本身的地域性别等画像都非常重要.百度利用其搜索引擎大数据,为我们提供了一个可以免费获取以上信息的平台. 地址:参见文末图使 ...
android mysql 搜索功能_android利用数据库实现搜索联想功能
[实例简介] android利用数据库实现搜索联想功能.主要实现的效果是和google百度搜索一样,实现联想功能. [实例截图] [核心代码] 4e431bd8-d287-4028-8476-7510 ...

利用cookie实现搜索记录

利用cookie实现搜索记录相关推荐

最新文章

热门文章