首页
我的博客
写文章
登录
注册
网站导航
互站首页
源码集市
服务市场
域名交易
网站交易
任务大厅
商家专区
互站社区
利用cookie实现搜索记录
转载
酷圈网源码商城
2018-10-01 17:01:50
评论(0)
阅读(379)
有时候我们需要在客户端保存用户的搜索记录,这样一来,当用户再次点击输入框,就可以自动显示用户最近的输入记录。最终效果如下: 1,默认情况下,用户未输入,显示最近的几条搜索记录: ![](https://img.huzhan.com/blog/20181001/20181538384377831.jpg) 2,用户输入字符,自动匹配最近的搜索记录: ![](https://img.huzhan.com/blog/20181001/20181538384393939.jpg) 想法是用一个数组存储用户的输入记录,然后放到cookie中,对搜索记录的所有操作都围绕这个数组进行。思路如下: - 1,显示:从cookie中拿到这个数组,从后往前显示内容,因为后面的是最新的; - 2,添加:首先监测是否存在,如果存在,就删除原来的,然后把新的添加到数组的最后; - 3,删除:直接从数组中删除这条记录。然后更新cookie值。 - 4,清空:直接把数组清空,然后更新cookie值。 详细代码如下: ```html
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");//获取cookie if(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 = ’
’; liHtml += ’
’+data[i]+’
’; liHtml += ’
’; liHtml += ’
’; liHtml += ’
’; $("#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"; }
取消
搜索记录
```
关注下面的标签,发现更多相似文章
本文TAG标签:
分享
QQ分享
微博分享
微信扫一扫
收藏
cookie
搜索记录
数组存储
输入记录
上一篇:sql怎么批量替换字段里的字符串的sql怎么批量替换字段里的字符串的
下一篇:解决ecshop出现Warning: file_put_cosql怎么批量替换字段里的字符串的
您好,
请先
登录
!请文明评论,不得违反国家法律法规!
已有
0
条评论
酷圈网源码商城
关注
TA的店铺
26
文章
31730
人气
12
评论
0
粉丝
喜欢我的文章,请分享到朋友圈!
Ta的最新文章
百度成立新 冠辟谣联盟,用科学粉碎 冠谣言
帝国CMS使用百度API提交工具,将当天新发表的内容提交给百
延迟重磅资讯:百度JS自动推送_百度自动推送功能重新上线
最近消息 Dedecms将对企业事业单位进行商业授权收费
ASP源码测试常见问题解决流程
最近评论
正规源码素材
本店商用源**业授权才100元,tp6内核开发,好用不贵,持久更新,插件市场齐全
乐公网络
不错的,支持一下!!!
有价值源码
不错不错[微笑]收纳了
港务梦幻科技
走过路过 决定还是错过
港务梦幻科技
走过路过 决定还是错过
标签大全
sql
(3)
ecshop
(3)
php
(2)
百度
(2)
css
(2)
cookie
(2)
服务器
(2)
asp
(2)
错误
(2)
div限制字数
(1)
set
(1)
一句话
(1)
代码
(1)
超出部分
(1)
批量替换
(1)
eval
(1)
淘宝分类
(1)
session
(1)
关闭
(1)
省略号
(1)
阅读目录
已有 0 条评论