【js】使用js进行前台模糊搜索功能

思路:我们首先将原本的数据存入到一个数组old_items中，然后再新创建一个新的数组items用于存储搜索到的数据，在遍历第一个数组old_items时，使用正则判断是否包含输入的的内容，如果包括，就将内容push到新数组items中，当一切执行完毕，就遍历items数组取出数据，将原本的内容清空，填充新数据。

首先的数据如下:

js代码如下:

function search(){
	//先将li的内容录入到数组中
	var ul = document.getElementById("content-wrap");
	var liArr = ul.getElementsByTagName("li");
	
	var keyword = $('#searchInp').val();
	var reg = new RegExp(keyword);
	var items = [];
	if (keyword.length > 0) {
		for(var i = 0;i<liArr.length;i++){
			var temp = liArr[i].innerHTML;
			if (temp.match(reg)) {
				items.push(temp);
			}
		}
		$(".content-wrap ul").empty();
		//遍历出items的内容并将其显示出来
		for(var i = 0; i< items.length;i++){
			$(".content-wrap ul").append("<li>"+ items[i] +"</li>");
		}
	}else{
		$(".content-wrap ul").empty();
		//遍历出old_items的内容并将其显示出来
		for(var i = 0; i< old_items.length;i++){
			$(".content-wrap ul").append("<li>"+ old_items[i] +"</li>");
		}
	}
	
}

效果: