利用cookie实现搜索记录

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

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
<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>
```

已有 0 条评论

Ta的最新文章

最近评论

标签大全

阅读目录