位置: 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响应式布局是什么)

  • 华为荣耀8x和9x区别(华为荣耀8X和vivoz3i哪个好)

    华为荣耀8x和9x区别(华为荣耀8X和vivoz3i哪个好)

  • qq巨轮怎么会掉(qq巨轮在什么情况下会消失)

    qq巨轮怎么会掉(qq巨轮在什么情况下会消失)

  • Excel怎么把单元格上下一分为二(excel怎么把单元格合并成一个)

    Excel怎么把单元格上下一分为二(excel怎么把单元格合并成一个)

  • Word字体加大怎么操作(word字体如何加大)

    Word字体加大怎么操作(word字体如何加大)

  • excel顺序填充数字(excel顺序填充数字 公式)

    excel顺序填充数字(excel顺序填充数字 公式)

  • 苹果手机拉黑对方打电话还有提示吗(苹果手机拉黑对方电话提示音是什么)

    苹果手机拉黑对方打电话还有提示吗(苹果手机拉黑对方电话提示音是什么)

  • 华为畅聊电话什么意思(用华为畅聊打电话要电话费吗)

    华为畅聊电话什么意思(用华为畅聊打电话要电话费吗)

  • 朋友圈仅聊天还能看到对方朋友圈吗(朋友圈仅聊天还能看到背景图吗?)

    朋友圈仅聊天还能看到对方朋友圈吗(朋友圈仅聊天还能看到背景图吗?)

  • p20超级快充怎么打开(p20超级快充怎么突然没了)

    p20超级快充怎么打开(p20超级快充怎么突然没了)

  • 还原网络设置密码是什么(还原网络设置密码是什么秘密)

    还原网络设置密码是什么(还原网络设置密码是什么秘密)

  • 系统光盘装在电脑里面不启动是怎么回事(系统光盘放入电脑怎么启动不了)

    系统光盘装在电脑里面不启动是怎么回事(系统光盘放入电脑怎么启动不了)

  • 手机快手如何连接电脑(手机快手怎么连麦?)

    手机快手如何连接电脑(手机快手怎么连麦?)

  • iPhone怎么显示副卡的通讯录(苹果如何打开副号)

    iPhone怎么显示副卡的通讯录(苹果如何打开副号)

  • 苹果系统为什么不能下载小红书(苹果系统为什么好用)

    苹果系统为什么不能下载小红书(苹果系统为什么好用)

  • 优酷视频如何转化成mp4(优酷视频如何转码)

    优酷视频如何转化成mp4(优酷视频如何转码)

  • 怎么查看电脑是不是新机(怎么查看电脑是win7还是win10)

    怎么查看电脑是不是新机(怎么查看电脑是win7还是win10)

  • 亚马逊美国站开店规则 (亚马逊美国站开店费用多少钱)

    亚马逊美国站开店规则 (亚马逊美国站开店费用多少钱)

  • 荣耀10怎样滚动截屏(荣耀怎样滚动截屏)

    荣耀10怎样滚动截屏(荣耀怎样滚动截屏)

  • Win7系统中,如何对IP地址进行设置呢?(win7系统中怎样)

    Win7系统中,如何对IP地址进行设置呢?(win7系统中怎样)

  • mediaman.exe是什么进程 有什么用 mediaman进程查询(media是什么文件)

    mediaman.exe是什么进程 有什么用 mediaman进程查询(media是什么文件)

  • vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

    vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

  • setsid命令  新会话中运行程序(setdo指令)

    setsid命令 新会话中运行程序(setdo指令)

  • 股权转让如何缴纳增值税
  • 所得税费用是哪类科目
  • 政府专项补助资金需要交所得税吗
  • 其他现代服务税目包括哪些内容
  • 公司筹建期间发生的费用怎么处理
  • 资产减值准备会计科目编码
  • 税务局开普票怎么开
  • 公司购买工装计入什么费用
  • 出口抵减内销产品应纳税额年终结转
  • 某企业月末由仓库转来发料凭证汇总表
  • 购买无形资产的价款超过正常信用
  • 年终奖缴税将有大变化
  • 简易计税方法的适用范围
  • 收入税金摘要怎么写
  • 长期股权投资稀释
  • 集团内部调拨账务处理
  • php数组函数有哪些
  • 企业期末营业利润分录
  • keyemain.exe是什么进程
  • neo什么意思翻译成中文
  • 前端大屏适配几寸显示器
  • php判断字符串长度的方法
  • 很有意思的一段话
  • php目录操作
  • 企业购入房产账务处理
  • 克雷格格林
  • 利息支出属于成本项目吗
  • vuex的五个属性及使用方法 简书
  • js防抖函数和节流函数
  • 2023跨年代码大全可复制免费
  • php的urlencode
  • 资产负债表其他应收款计算公式
  • 一台设备可以分开开票吗
  • 公司购买的房屋怎么入账
  • 增值税买一送一处理方法
  • 公司承担员工的费用,员工违规吗
  • 劳务支出和应付职工薪酬
  • 基本户 变更
  • dedecms怎么更换模板
  • 矿产资源补偿费属于管理费用吗
  • 申请电子发票需要什么条件
  • 劳务报酬的个人所得税
  • sqlserver创建维护计划
  • 投资收益会计科目账务处理
  • 税务稽查补缴上年所得税分录
  • 上月财务费用多做了,本月怎么调
  • 月末需要做的会计分录
  • 大修和维修怎样定义
  • 冲销预付账款后怎么做账
  • 低值易耗品怎么做账务处理
  • 新成立公司怎么办理社保开户
  • win10预览版21390
  • win10如何连接远程电脑
  • windows vista build
  • 如何避免系统性风险
  • 高效快捷键
  • dll文件应该放在哪里
  • jquery 点击按钮
  • web jquery
  • nodejs run
  • 一个简单的灵魂福楼拜
  • Unity3D游戏开发pdf
  • js调用wsdl接口
  • 鼠标滑动页面缩放取消
  • unity3d android
  • 从零开始的基础篇
  • python中模块的作用
  • unity3d初学者教程视频
  • FileUtils文件工具类
  • js正则 \w
  • Dojo Javascript 编程规范 规范自己的JavaScript书写
  • js的iframe
  • 如何判断python列表长度
  • 税务局把我拉入黑名单了怎么办
  • 个人转让商业用房税费
  • 房产交契税网上可以交吗
  • 车船税每年都是300怎么变成600
  • 小规模纳税人网上开专票流程
  • 小规模纳纳税人
  • 地税完税证明是什么样子
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设