文章目录

  • 闲言
  • 一、整体思路
  • 二、具体步骤
    • 1. 搜索内容的字符串 -> 字符数组
    • 2. 被查询对象增加匹配度属性
    • 3. 检测匹配度,并记录到匹配度属性
    • 4. 按照匹配度降序显示,不显示匹配度为零的对象
  • 总结

闲言

提示:可以跳过闲言,直接上干货,这里谈谈我的思路是如何诞生的。
昨天我开发的内容轮到输入搜索,从UI上看:input输入框 + button搜索按钮,就实现了。关键在于背后如何实现对数据的搜索功能,常见方法:搜索内容给到后端,sql语句进行模糊查询,将结果返回前端,再显示。然而情况有所不同,如果后端数据库的所有信息,在页面created时就全部给前端了呢?这种情况下,如果使用常见,未免有点浪费时间,但是前端的JS如何实现模糊查询?于是我和舍友讨论前端实现模糊查询的问题时,我们以百度为例,思考百度的搜索功能是如何实现的呢?我当时开玩笑似的说“百度说不定是把我们输入的搜索内容全部打散成字符数组,然后进行的匹配”。第二天,我继续做开发时,发现网上纯前端实现模糊查询的我都看不懂(俺这个阅读能力不行),所以我决定就按照我昨天的思路做做尝试,于是就有了今天这篇博客。


提示:以下是本篇文章正文内容,下面案例可供参考

一、整体思路

核心思想: 将输入的内容拆分成单个字符形成搜索数组,然后利用indexOf查看被查询对象与这个搜索数组的重合度/匹配度(计算每个字符在被查询对象中出现的次数),并做好记录,之后就是排序和显示。

具体步骤:

  1. 将用户输入的搜索内容即字符串,划分成字符数组(后续称为搜索数组)
  2. 为每个被查询对象增加匹配度属性,
  3. 检测搜索数组与每个被查询对象的匹配程度,并记录到该对象的匹配度属性
  4. 将所有被查询对象按照自身的匹配度属性降序排列,且不显示零匹配度的对象

注意:

  • 被查询对象是以对象数组的形式存储,对象数组中存储所有被查询对象

二、具体步骤

注意:

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

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得知搜索数组中每个字符在被检测对象的检测内容中的出现次数,根据出现次数计算匹配度属性。

举例:

  1. 搜索数组:selectList=[‘语’,‘文’,‘下’];
  2. 某一个试卷的试卷名称:this.testPaperListPart[i].testName=‘大学语文(文化版下)’;
  3. 利用indexOf,检测该试卷的试卷名称与搜索数组的匹配度:其中 ‘语’ 出现了1次、‘文’ 出现了2次、‘下’ 出现了1次;
  4. 那么该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++;}

总结