前端实现搜索记录功能-技术分析

接上篇博客：

先看js的第1段代码

 

$(document).delegate(".his-record>div","click",function(){
		$("#idNumber1").val($(this).text());	
	});

　　

因为我们的搜索记录是通过prepend（）方法动态添加的，如果用一般的事件绑定方法，会没有效果。熟悉jquery的朋友知道，这时候应该是delegate()方法出场了，w3cschool的解释：使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

 

接下来是init()函数，这里的考虑是：首次加载页面，用这个函数获取数据，显示搜索记录。当我们点击搜索记录或者输入搜索词，再次搜索的时候，也要刷新搜索记录显示。另外，清除记录的时候，也需要刷新记录显示，基于这些考虑，写了init()函数。调用的地方有4个。

 

这段判断是，去掉我们不想要的localStorage记录，因为在打开本页面之前，本域名下的localStorage可能就有记录。isNaN（）判断字符串里的内容是否为数字。这里判断并不是很严谨，可以改写。

 

很重要的一点，init（）执行时，每次会从localStorage获取【最新】的记录，然后添加到显示的区域。因此，必须每次清空这个区域。

下面的代码来到点击搜索按钮，改变localStorage记录，然后调用init（）让最新的记录显示。第1步，先判断输入。如果输入为空，直接返回，不往下执行：

 

	if(!value){
			alert("你未输入搜索内容");
			return false;
		}

　　

输入合法的情况又分了两种：1.输入的内容localStorage记录里有的情况，2.输入的内容没有记录的情况。情况1不用考虑大于6条记录，因为重复的时候只会改变顺序而不会新增记录。这样不会超过原先的记录条数。情况2就需要考虑记录条数大于6的时候，出现大于6，必须把最早的记录移除，然后把最新的记录添加进去。

情况1的条件：

 

//输入的内容localStorage有记录
		if($.inArray(value,hisItem)>=0){

　　

这里用到了jquery的工具方法：$.inArray（）。这个方法是数组的indexof()方法。我们都知道，字符串拥有indexof方法。有了jquery，我们也可以对数组操作相同的功能。

 

最后的一块就是清除记录，清除记录的时候并没有直接用localStorage.clear()方法，因为这种清除会把本域名所有的记录清除，这是我们不想要的。我们只需要把搜索记录相关的记录清除即可，然后调用init()方法。这里调用init()，而不是直接清空显示区域的html标签，是出于严谨的考虑，保持网页显示与localStorage存储一致。