闲言

提示：可以跳过闲言    
    
    
    
    ，直接上干货 


     


     


     


     


，这里谈谈我的思路是如何诞生的    
    
    
    
    。

昨天我开发的内容轮到输入搜索

 




 




 




 




，从UI上看：input输入框 + button搜索按钮   

   

   

   

   ，就实现了 


     


     


     


     


。关键在于背后如何实现对数据的搜索功能  

     

     

     

     

，常见方法：搜索内容给到后端


  




  




  




  




，sql语句进行模糊查询  


  


  


  


  ，将结果返回前端   
     
     
     
     
，再显示

 




 




 




 




。然而情况有所不同



   




   




   




   




，如果后端数据库的所有信息 



 



 



 



 ，在页面created时就全部给前端了呢？这种情况下                        ，如果使用常见




    




    




    




    




，未免有点浪费时间



















，但是前端的JS如何实现模糊查询？于是我和舍友讨论前端实现模糊查询的问题时                         ，我们以百度为例



     



     



     



     



，思考百度的搜索功能是如何实现的呢？我当时开玩笑似的说“百度说不定是把我们输入的搜索内容全部打散成字符数组




















，然后进行的匹配    
    
    
    
    ”   

   

   

   

   。第二天    
    
    
    
    ，我继续做开发时 


     


     


     


     


，发现网上纯前端实现模糊查询的我都看不懂（俺这个阅读能力不行）

 




 




 




 




，所以我决定就按照我昨天的思路做做尝试   

   

   

   

   ，于是就有了今天这篇博客  

     

     

     

     

。

提示：以下是本篇文章正文内容  

     

     

     

     

，下面案例可供参考

一
    
    
    
    
、整体思路

核心思想： 将输入的内容拆分成单个字符形成搜索数组


  




  




  




  




，然后利用indexOf查看被查询对象与这个搜索数组的重合度/匹配度（计算每个字符在被查询对象中出现的次数）  


  


  


  


  ，并做好记录   
     
     
     
     
，之后就是排序和显示


  




  




  




  




。

具体步骤：

将用户输入的搜索内容即字符串



   




   




   




   




，划分成字符数组（后续称为搜索数组） 为每个被查询对象增加匹配度属性 



 



 



 



 ， 检测搜索数组与每个被查询对象的匹配程度                        ，并记录到该对象的匹配度属性 将所有被查询对象按照自身的匹配度属性降序排列




    




    




    




    




，且不显示零匹配度的对象

注意：

被查询对象是以对象数组的形式存储



















，对象数组中存储所有被查询对象

二     


     


     


     


    、具体步骤

注意：

此次搜索输入：试卷名称相关内容 根据输入内容                         ，查询哪些试卷的试卷名称与之匹配

1. 搜索内容的字符串 -> 字符数组

this.selectContent：用户输入的搜索内容字符串 selectList：划分后的字符数组 var selectList=this.selectContent.split();

2. 被查询对象增加匹配度属性

thiis.testPaperListPart：被查询对象的对象数组



     



     



     



     



，即存储所有试卷的试卷对象数组 this.testPaperListPart[i].matchDegree=0; // 建立匹配度




















，初始为0

3. 检测匹配度    
    
    
    
    ，并记录到匹配度属性

this.testPaperListPart[i].testName：被检测对象的实际检测内容 


     


     


     


     


，即每个试卷的试卷名称

 




 




 




 




，主要检测试卷名称与输入内容的匹配程度 通过indexOf方法实现检测匹配度   

   

   

   

   ，相关博客《indexOf介绍》 




 




 




 




 


、《js 查找字符串中某个字符出现的位置和次数》  


  


  


  


  。我们根据indexOf得知搜索数组中每个字符在被检测对象的检测内容中的出现次数  

     

     

     

     

，根据出现次数计算匹配度属性   
     
     
     
     
。

举例：

搜索数组：selectList=[‘语’,‘文’,‘下’]； 某一个试卷的试卷名称：this.testPaperListPart[i].testName=‘大学语文(文化版下)’； 利用indexOf


  




  




  




  




，检测该试卷的试卷名称与搜索数组的匹配度：其中 ‘语’ 出现了1次

   

   

   

   

、‘文’ 出现了2次     

     

     

     

   、‘下’ 出现了1次； 那么该testName与搜索数组的匹配度即1+2+1=4次  


  


  


  


  ，则该试卷的匹配度matchDegree=4



   




   




   




   




。 for(var i=0;i<this.testPaperListPart.length;i++){ // 建立匹配度   
     
     
     
     
，初始化为0 this.testPaperListPart[i].matchDegree=0; // 检测匹配度 for(var k=0;k<selectList.length;k++){ // 利用indexOf



   




   




   




   




，记录每个字符在testName中出现的个数 



 



 



 



 ，并记录到匹配度 var index = this.testPaperListPart[i].testName.indexOf(selectList[k]); while(index!=-1){ this.testPaperListPart[i].matchDegree++; index=this.testPaperListPart[i].testName.indexOf(selectList[k],index+1); } } }

4. 按照匹配度降序显示                        ，不显示匹配度为零的对象

// 根据匹配度排序 this.testPaperListPart.sort(function(a, b){return b.matchDegree - a.matchDegree}); // 删除匹配度为0的试题  




  




  




  




  

、删除matchDegree属性 var k=0; while (k<this.testPaperListPart.length){ // 删除匹配度为0的试题 if(this.testPaperListPart[k].matchDegree==0){ this.testPaperListPart.splice(k,1); continue;// 直接进入下一个循环 } Reflect.deleteProperty(this.testPaperListPart[k],matchDegree); // 删除matchDegree属性 k++; }

总结