javascript+jquery:利用cookie实现搜索记录

菜小编

2018-10-11

WEB前端开发

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

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

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

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

1，显示：从cookie中拿到这个数组，从后往前显示内容，因为后面的是最新的；
2，添加：首先监测是否存在，如果存在，就删除原来的，然后把新的添加到数组的最后；
3，删除：直接从数组中删除这条记录。然后更新cookie值。
4，清空：直接把数组清空，然后更新cookie值。

详细代码如下：

<scri-pt src="../js/jquery-3.1.1.min.js"></scri-pt>
<scri-pt src="../js/jquery.cookie.js"></scri-pt>
<scri-pt type="text/javascri-pt">
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 = ’<li><div class=><i class=></i>’;
liHtml += ’<b class=><a href="javascri-pt:;" onclick="itemClick(’+data[i]+’)">’+data[i]+’</a></b>’;
liHtml += ’</div>’;
liHtml += ’<i class=></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";
}
</scri-pt>
</head>
<body>

<div class=>
<div class=>
<div class=>
<a href="javascri-pt:;" class=>取消</a>
<div class=>
<input placeholder="请输入关键词信息搜索" class=>
<a class=></a>
</div>
</div>
</div>
</div>
<div class=></div>
<div class=>

<div class=>
<ul class=>
<li>
<b class=>搜索记录</b>
<a href="javascri-pt:;" onclick="emptyHistory()" class=></a>
</li>
</ul>
</div>

<div>
<ul id="history">
</ul>
</div>
</div>
</body>

THE END

IIS7.5运行ASP网站连接数据库错误解决方案（64位服务器）

<<上一篇

doodoo.js教程：3步演示快速创建一个doodoo项目

下一篇>>