利用cookie实现搜索记录

最新推荐文章于 2024-05-27 13:54:09 发布

努力奋斗ing

最新推荐文章于 2024-05-27 13:54:09 发布

阅读量3.5k

点赞数 3

分类专栏：前端文章标签： JS

本文链接：https://blog.csdn.net/qq_21911655/article/details/79501979

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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");//获取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="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>

努力奋斗ing

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
利用cookie实现搜索记录

有时候我们需要在客户端保存用户的搜索记录，这样一来，当用户再次点击输入框，就可以自动显示用户最近的输入记录。最终效果如下：1，默认情况下，用户未输入，显示最近的几条搜索记录：2，用户输入字符，自动匹配最近的搜索记录：想法是用一个数组存储用户的输入记录，然后放到cookie中，对搜索记录的所有操作都围绕这个数组进行。思路如下：1，显示：从cookie中拿到这个数组，从后往前显示内容，...
复制链接

扫一扫