前端JS实现数据的模糊搜索（不走后端接口）

当后端没有提供数据列表的模糊搜索的接口时，我们可以在前端利用JS实现数据列表的模糊搜索功能。

举例说明：当我们需要在部门列表中，实现模糊搜索的功能，这时可以不用走后端接口，我们可以把这些部门列表存放在一个数组中，然后根据用户输入的部门名称在这个数组中模糊搜索。（我们可以把部门列表放入localstorage或者sessionstorage中保存）

注意：localstorage和sessionstorage只能存字符串，不能存对象。

第一步：页面加载后显示部门列表（JS代码，走后端接口获取部门列表并显示，将列表存入localstorage中）

function getDeptListByUserId(){
	$.ajax({
        type: "POST",
        url:"getDeptList.do",
        async:false,
        dataType :"json",
        data: {  	 
        },
        success:function(result){
        	var str = "";
        	var depts = result.dept;
        	localStorage.setItem("deptList", JSON.stringify(depts));
        	for(var i=0;i,"+depts[i].CC_Code+"。"+"";
        	}
        	$("#dptlist").html(str);
        	$("#dptlist li").click(function(){
      		  var test=$(this).text().toString()
      		  var index=test.indexOf(",");
      		  var end=test.indexOf("。");
      		  var dptname;
      		  var dptcode;
      		  if(index!=-1)
      			  dptname=test.substring(0,index);
      		  if(end!=-1)
      			  dptcode=test.substring(index+1,end);
      		  document.getElementById("dptname").value=dptname;
      		  document.getElementById("dptcode").value=dptcode;
      		  $("#myModaldpt").modal('hide');
      	  });
      
        }
	});
}

第二步：获取用户输入的值，进行模糊搜索

HTML代码

         ×
        
选择所属部门
      
      

        

          
 部门：
            

               
            
            

          
          

          
        
      

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

JS代码：

function doSearchDept(){
	var deptList=JSON.parse(localStorage.getItem("deptList"));
	var str = "";
	var condition = $("#deptSerch").val();
	var reg = new RegExp(condition);
	var items = [];
	if(condition.length > 0){
		for(var i=0;i,"+items[i].CC_Code+"。"+"";
		}
		$("#dptlist").html(str);
		$("#dptlist li").click(function(){
  		  var test=$(this).text().toString()
  		  var index=test.indexOf(",");
  		  var end=test.indexOf("。");
  		  var dptname;
  		  var dptcode;
  		  if(index!=-1)
  			  dptname=test.substring(0,index);
  		  if(end!=-1)
  			  dptcode=test.substring(index+1,end);
  		  document.getElementById("dptname").value=dptname;
  		  document.getElementById("dptcode").value=dptcode;
  		  $("#myModaldpt").modal('hide');
  	  });
		
	}else{
		$(".dptlist").empty;
		for(var i=0;i,"+deptList[i].CC_Code+"。"+"";
		}
		$("#dptlist").html(str);
		$("#dptlist li").click(function(){
  		  var test=$(this).text().toString()
  		  var index=test.indexOf(",");
  		  var end=test.indexOf("。");
  		  var dptname;
  		  var dptcode;
  		  if(index!=-1)
  			  dptname=test.substring(0,index);
  		  if(end!=-1)
  			  dptcode=test.substring(index+1,end);
  		  document.getElementById("dptname").value=dptname;
  		  document.getElementById("dptcode").value=dptcode;
  		  $("#myModaldpt").modal('hide');
  	  });
	}		
}