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

  • 教你玩转微博,怎样撰写微博软文 (微博这么玩)

    教你玩转微博,怎样撰写微博软文 (微博这么玩)

  • 华为nova7白色虚拟按键如何取消(华为nova7se变成白屏了怎样调)

    华为nova7白色虚拟按键如何取消(华为nova7se变成白屏了怎样调)

  • 钉钉笑脸打卡照片别人能看到吗(钉钉笑脸打卡自己的照片在哪里)

    钉钉笑脸打卡照片别人能看到吗(钉钉笑脸打卡自己的照片在哪里)

  • ipad黑屏但是有声音(ipad黑屏但是有亮光)

    ipad黑屏但是有声音(ipad黑屏但是有亮光)

  • 苹果耳机airpods充电指示灯(苹果耳机airpods四代)

    苹果耳机airpods充电指示灯(苹果耳机airpods四代)

  • 抖音赞怎么换钱(抖音上一万点赞能提现多少)

    抖音赞怎么换钱(抖音上一万点赞能提现多少)

  • 电脑打字后面的字消失按哪个键恢复(电脑打字后面的竖杠叫啥)

    电脑打字后面的字消失按哪个键恢复(电脑打字后面的竖杠叫啥)

  • 苹果正在准备更新要等多久(苹果正在准备更新可以断网吗)

    苹果正在准备更新要等多久(苹果正在准备更新可以断网吗)

  • 苹果手机闪烁灯怎么关闭(苹果手机闪烁灯关闭)

    苹果手机闪烁灯怎么关闭(苹果手机闪烁灯关闭)

  • 抖音连着点赞会限流吗(抖音连着点赞会被限流吗)

    抖音连着点赞会限流吗(抖音连着点赞会被限流吗)

  • 选中的磁盘具有mbr分区表 无法安装系统(选中的磁盘具有mbr分区表无法安装系统)

    选中的磁盘具有mbr分区表 无法安装系统(选中的磁盘具有mbr分区表无法安装系统)

  • 手机为什么发烫(手机为什么发烫就卡)

    手机为什么发烫(手机为什么发烫就卡)

  • 薄荷体脂秤连不上蓝牙(薄荷体脂称 lo)

    薄荷体脂秤连不上蓝牙(薄荷体脂称 lo)

  • 微信投诉举报提交不了(微信投诉举报成功后钱会退回来吗)

    微信投诉举报提交不了(微信投诉举报成功后钱会退回来吗)

  • 骁龙865发布时间(骁龙第一代8+和骁龙888)

    骁龙865发布时间(骁龙第一代8+和骁龙888)

  • 手机流量漫游费是什么意思(手机流量漫游怎样收费)

    手机流量漫游费是什么意思(手机流量漫游怎样收费)

  • cad插件加载完怎么用(cad2019插件加载)

    cad插件加载完怎么用(cad2019插件加载)

  • 小米手机夜光屏怎么开(小米手机夜光屏调节多少合适)

    小米手机夜光屏怎么开(小米手机夜光屏调节多少合适)

  • 七天网络授权步骤(七天网络要怎么样才能授权)

    七天网络授权步骤(七天网络要怎么样才能授权)

  • 滴滴怎么改紧急联系人(滴滴怎么改紧急联系人电话号码)

    滴滴怎么改紧急联系人(滴滴怎么改紧急联系人电话号码)

  • qq好友申请会过期吗(qq好友申请一直有效吗)

    qq好友申请会过期吗(qq好友申请一直有效吗)

  • Pantone PMS色卡(pantone色卡标准)

    Pantone PMS色卡(pantone色卡标准)

  • 手机屏幕lcd和led的区别(手机屏幕lcd和led显示器的区别)

    手机屏幕lcd和led的区别(手机屏幕lcd和led显示器的区别)

  • 外省人员收入怎么查
  • 普通发票税率1%要交税吗
  • 出口合同包括哪些条款
  • 事业单位固定资产入账标准最新规定
  • 固定资产与累计折旧有对应关系吗
  • 未开具发票负数的原因
  • 内账固定资产已经费用化了怎么办
  • 如何区分总额法和净额法
  • 法院判决书能做证据使用吗
  • 必须开具增值税专用发票
  • 公司偷税漏税是当事人责任大还是法人责任大
  • 房地产契税新政策2021退税
  • 贷款 保险费
  • 公司业务往来
  • 租赁费交税税率是多少
  • 出口退税生产企业增值税附加税怎么申报
  • 海关完税凭证抵扣税率
  • 油票入什么管理费用科目
  • 税收分类编码选错了怎么办
  • 投资协议需要注意细节
  • 残疾人保障金中上年在职职工人数怎么计算
  • 样品开发费用怎么记账
  • 增值税纳税申报表在哪里查询
  • 去银行打回单需要带身份证吗
  • 房地产企业土地出让金抵减销项税额
  • 生产成本和制造费用属于存货吗
  • 销售收入净额与销售收入的区别
  • 核定征收如何做账务处理
  • 技术转让免征增值税文件
  • 固态硬盘坏了的话是整个坏吗
  • 如何维护电脑系统安全?
  • 为什么路由器经常断网
  • 个人所得税计算方法及抵扣方法
  • 在win10中怎么从edge旧ie浏览器
  • qbupdate.exe - qbupdate是什么进程 有什么作用
  • rundll32进程很多
  • 员工福利费账务处理
  • 两借三贷是复合分录吗
  • php表单生成器
  • 办公大楼装修费怎么算
  • Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
  • 定额材料损耗的计算公式
  • 用python处理图像
  • js中的定时器
  • react 组件化
  • 猿猴的作文
  • dns管理控制台在哪里
  • 水利建设基金计算公式
  • 中小型科技企业所面临的普遍问题是资金缺乏
  • 帝国cms首页调用显示标题图片代码
  • 新政府会计制度下的基建会计
  • 税务局退回来的钱账务处理
  • 公司购买法拍房需要交什么费
  • 个人汽车保险费可以放在公司报销吗
  • 固定资产分期付款会计处理?
  • 个体户怎么申请电子营业执照
  • 简易计税的增值税税率
  • 营改增清包工
  • 怎么盘存货
  • 建设工程项目设计阶段的投资控制方法有哪些
  • 分期收款定义
  • 购置固定资产进项税处理的变迁
  • 税收滞纳金计入营业外收入的哪里
  • 增值税年末一定要结转吗
  • 小企业会计准则主要按照什么计量
  • sql多表连接查询效率
  • win8.1使用技巧
  • fedora安装apt
  • mac计算器怎么用
  • Linux系统中sort排序命令的使用教程
  • linux系统中安装web服务
  • daio.dll 病毒
  • mkcool是什么文件
  • windows1020h2更新失败
  • win8怎么设置
  • Node.js中的construct
  • python调用cuda执行加法
  • bash shell脚本编程经典实例(第2版)
  • js键盘事件有哪些?各自的作用如何
  • javascript教程推荐知乎
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设