位置: IT常识 - 正文

VUE前端实现“模糊搜索“(纯前端)(vue前端页面设计)

编辑:rootadmin
VUE前端实现“模糊搜索“(纯前端) 文章目录闲言一、整体思路二、具体步骤1. 搜索内容的字符串 -> 字符数组2. 被查询对象增加匹配度属性3. 检测匹配度,并记录到匹配度属性4. 按照匹配度降序显示,不显示匹配度为零的对象总结闲言

推荐整理分享VUE前端实现“模糊搜索“(纯前端)(vue前端页面设计),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 前端模板,vue前端页面设计,vue.js前端,vuejs前端开发实战,vue前端开发教程,vuejs前端开发实战,vue 前端模板,vue 前端模板,内容如对您有帮助,希望把文章链接给更多的朋友!

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

VUE前端实现“模糊搜索“(纯前端)(vue前端页面设计)

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

一、整体思路

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

具体步骤:

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

注意:

被查询对象是以对象数组的形式存储,对象数组中存储所有被查询对象二、具体步骤

注意:

此次搜索输入:试卷名称相关内容根据输入内容,查询哪些试卷的试卷名称与之匹配1. 搜索内容的字符串 -> 字符数组this.selectContent:用户输入的搜索内容字符串selectList:划分后的字符数组var selectList=this.selectContent.split('');2. 被查询对象增加匹配度属性thiis.testPaperListPart:被查询对象的对象数组,即存储所有试卷的试卷对象数组this.testPaperListPart[i].matchDegree=0; // 建立匹配度,初始为03. 检测匹配度,并记录到匹配度属性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++;}总结
本文链接地址:https://www.jiuchutong.com/zhishi/287286.html 转载请保留说明!

上一篇:ElementPlus DateTimePicker日期时间选择器限制可选时间范围(精确时分秒)

下一篇:h5响应式布局、PC和移动端适配方案(h5响应式布局是什么)

  • 小企业汇算清缴要审计报告吗
  • 查补以前年度税款
  • 应税劳务的主要成本包括
  • 购销合同印花税按70%
  • 什么是国税发票号码
  • 兼营和混合销售的联系
  • 免税农产品发票怎么抵扣申报
  • 劳务公司劳务协议范本
  • 幼儿园属于小型幼儿吗
  • 网上报税超过了时间还能报吗
  • 51电子发票客户端后使用教程
  • 公司车辆交强险需要什么手续
  • 企业购买用于绿化的土地
  • 收到发票冲预付账款摘要怎么写
  • 会计报表的附表包括哪些
  • 税收分类编码如何填写
  • 水电费差价收入计算增值税公式是怎样的?
  • 特定业务计算的应纳税所得额是什么意思
  • 营改增对企业的影响案例
  • 作废章盖在哪个位置
  • 银行代发工资当月没发下个月发没事儿吧
  • 含税销售额的计算公式是什么意思
  • 跨年发票如何入账小企业会计准
  • 土地使用权的租赁与出租的区别
  • 公司为职工购买社保只购买三险可以吗
  • 上月的应付账款怎么记账
  • 我想看一下这个月几日
  • 收据入账会计分录
  • 企业出售产品前,预收客户一笔货款
  • 收入支出如何结转
  • 盘亏固定资产累计折旧
  • 阿里云天池大赛pdf
  • 如何做商品批发
  • symfony框架的特点
  • php 读取大excel
  • 公司挂靠社保的人员需要申报个人所得税吗?
  • 补交上年度企业所得税报表怎么填写
  • arc架构
  • smarty模板注入
  • 商业模式诠释了一个企业如何赚钱
  • 收到投资款的会计科目怎么入账
  • 毕业设计教程
  • 计算机视觉的应用
  • 待摊费用和预提费用属于什么账户
  • 收到合同预付款怎么处理
  • 织梦logo
  • 有外币业务需不需要交税
  • 购买用品开专票怎么开
  • 一般纳税人增值税减免政策2023
  • 资产减值损失的定义
  • 跨月抵扣的发票能退回吗
  • 现金流量明细表怎么看
  • 进项留抵月末要结转吗
  • 报销餐费增值税进项税计入什么科目
  • 存货报废损失会计处理
  • 免征的教育费附加怎么做账
  • 发票监制章是什么章图片
  • 股东之间转让股权有优先购买权吗
  • 获取客户端所有cookie对象的方法
  • win2000安全模式怎么进
  • solaris ip配置
  • 命令提示符操作方法
  • gwsloader.exe是什么意思
  • 电脑英伟达控制面板在哪
  • linux中的top命令
  • win10正式版多少钱
  • python 自定义sort
  • cocos2d-x教程
  • opengl文档窗口是什么
  • 基于javascript数独游戏论文参考文献
  • firefox浏览器标识ua
  • js文件设置编码
  • js判断用户输入密码
  • 深入理解计算机系统
  • 怎么利用python处理批量表格
  • jquery中有几种方法可以来设置和获取样式
  • 贵州开票软件怎么下载安装
  • 天津本田天虹90摩托车库存
  • 镇江涨潮退潮时间表
  • 电子票据如何报销
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设