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

淩亂°似流年 2022-05-15 11:42 1828阅读 1赞

## 当后端没有提供数据列表的模糊搜索的接口时，我们可以在前端利用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.length;i++){
            		str +="<li><a>"+depts[i].CC_Name+"<span style=\"display:none;\">,"+depts[i].CC_Code+"。"+"</span></a></li>";
            	}
            	$("#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代码

<div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span></button>
            <h4 class="modal-title mytitle">选择所属部门</h4>
          </div>
          <div class="modal-body">
            <div id="wrap">
              <div class="product-head"> 部门：
                <div id="formdpt">
                   <input id = "deptSerch" oninput="doSearchDept()"/>
                </div>
                <div class="clear"></div>
              </div>
              <ul id="dptlist">
              </ul>
            </div>
          </div>

思路：我们首先将原本的数据存入到一个数组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<deptList.length;i++){
    			var temp = deptList[i].CC_Name;
    			if(temp.match(reg)){
    				items.push(deptList[i]);
    			}
    		}
    		$(".dptlist").empty;
    		for(var i=0;i<items.length;i++){
    			str +="<li><a>"+items[i].CC_Name+"<span style=\"display:none;\">,"+items[i].CC_Code+"。"+"</span></a></li>";
    		}
    		$("#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.length;i++){
    			str +="<li><a>"+deptList[i].CC_Name+"<span style=\"display:none;\">,"+deptList[i].CC_Code+"。"+"</span></a></li>";
    		}
    		$("#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');
      	  });
    	}		
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，1828人围观）

还没有评论，来说两句吧...

相关阅读

相关前端如何调用后端接口

前端可以通过 Ajax，Fetch API，Axios 等方式调用后端接口。 Ajax：使用 XMLHttpRequest 对象或者使用现代浏览器提供的 fetch() AP

迈不过友情╰/ 2024年03月25日 13:46/ 0 赞/ 113 阅读

相关前端如何走通后端接口

0 写在前面现在基本都是前后端分离的项目了，那么前端小伙伴如何获取后端小伙伴接口呢？ 1 条件同一WiFi下，让后端小伙伴分享出自己的ip地址：步骤1:

Bertha 。/ 2024年03月24日 22:24/ 0 赞/ 44 阅读

相关 vue 实现前端模糊搜索

　　最终效果是这样的：? 　　![vue 实现前端模糊搜索 \_vue 实现前端模糊搜索][vue _ _vue] 　　思路是：　　1、写一个方法过滤每一组字符串，需要

分手后的思念是犯贱/ 2023年09月25日 12:11/ 0 赞/ 15 阅读

相关前端获取后端数据

前端获取后端数据前阵子做个项目，因为涉及到前端代码，奈何前端知识有限，有个问题搞了好久。前端的js里需要一个数组，我后端都封装好了，但是这短短的距离我却不知道怎么拿

逃离我推掉我的手/ 2023年01月13日 09:00/ 0 赞/ 203 阅读

相关 vue 本地搜索 js实现本地数据搜索 el-select 模糊搜索

封装好的[添加链接描述][Link 1] data goodsTypeList:[], goodsTypeListCopy :[], methods

本是古典何须时尚/ 2022年12月30日 14:56/ 0 赞/ 213 阅读

相关 js模糊搜索

js模糊搜索 \+ 实战 + 所谓模糊查询就是列表中的数据是否有符合关键字或某个字符,实现的操作方法主要有两种: 1.字符串方法indexOf：代码如下：

清疚/ 2022年12月15日 11:26/ 0 赞/ 220 阅读

相关 js 实现模糊搜索功能

最近遇到一个需要前端对已有数据做模糊查询的功能。方法有很多种，个人比较推荐使用正则表达式来实现，下面是我实现的方法：封装一个公用的方法： //list 是已有的数

绝地灬酷狼/ 2022年11月12日 14:52/ 0 赞/ 1044 阅读

相关 es不建议模糊搜索_用es实现模糊搜索

![3c4218fd6b63080d1b83d9e4a328d03e.png][] ![8a087dda279c53e39c20c7c7886a8979.png][] ![

淡淡的烟草味﹌/ 2022年11月06日 02:58/ 0 赞/ 258 阅读

相关前端该不该转后端 .前端的路不知道怎么走,

我，Scott，一家创业公司的 CTO。从业 6 年却很少写文章，近一年来接触了几十个刚毕业的前端新人，也面试了 100 多个前端工程师和 Nodejs 工程师，对于前端发

àì夳堔傛蜴生んèń/ 2022年05月19日 05:15/ 0 赞/ 197 阅读

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

当后端没有提供数据列表的模糊搜索的接口时，我们可以在前端利用JS实现数据列表的模糊搜索功能。举例说明：当我们需要在部门列表中，实现模糊搜索的功能，这时可以不用走后端接口

淩亂°似流年/ 2022年05月15日 11:42/ 1 赞/ 1829 阅读