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

  • qq空间注销后还能可以恢复使用吗(QQ空间注销后还能)

    qq空间注销后还能可以恢复使用吗(QQ空间注销后还能)

  • 云备份失败什么意思(云备份备份未完成是怎么回事)

    云备份失败什么意思(云备份备份未完成是怎么回事)

  • 苹果8p扬声器左边不响(苹果8p扬声器左边不响咋回事)

    苹果8p扬声器左边不响(苹果8p扬声器左边不响咋回事)

  • 电脑能连机顶盒吗(电脑连机顶盒不然开不了机)

    电脑能连机顶盒吗(电脑连机顶盒不然开不了机)

  • 电脑d盘格式化对电脑有影响吗(电脑d盘格式化后还能找回资料吗)

    电脑d盘格式化对电脑有影响吗(电脑d盘格式化后还能找回资料吗)

  • esxi和vmware区别(esxi比vm更快吗)

    esxi和vmware区别(esxi比vm更快吗)

  • 手机最高温度不能超过多少(手机温度高不高)

    手机最高温度不能超过多少(手机温度高不高)

  • 苹果手机开不了机怎么办充电没反应(苹果手机开不了wifi按钮)

    苹果手机开不了机怎么办充电没反应(苹果手机开不了wifi按钮)

  • 华为手机相机声音在哪里关闭(华为手机相机声控在哪里设置?)

    华为手机相机声音在哪里关闭(华为手机相机声控在哪里设置?)

  • 抖音私信能撤回吗(抖音私信能撤回就证明对方没把消息删除)

    抖音私信能撤回吗(抖音私信能撤回就证明对方没把消息删除)

  • lldtl10是什么手机(ldn—al10是什么手机)

    lldtl10是什么手机(ldn—al10是什么手机)

  • 安卓手机qq下载的文件在哪里(安卓手机qq下载安装2019版)

    安卓手机qq下载的文件在哪里(安卓手机qq下载安装2019版)

  • 怎么传软件给别的手机(怎么传软件给别的好友)

    怎么传软件给别的手机(怎么传软件给别的好友)

  • obj文件怎么打开(文件dwg格式怎么打开)

    obj文件怎么打开(文件dwg格式怎么打开)

  • 小米9pro手机root权限怎么开启(小米9Pro手机丢失刷机后还能不能定位)

    小米9pro手机root权限怎么开启(小米9Pro手机丢失刷机后还能不能定位)

  • 拼多多怎样给5星(拼多多怎样给快递员好评)

    拼多多怎样给5星(拼多多怎样给快递员好评)

  • 微信头像晃动是啥意思(触碰微信头像会晃动)

    微信头像晃动是啥意思(触碰微信头像会晃动)

  • 苹果黑夜模式在哪里(苹果黑夜模式在哪)

    苹果黑夜模式在哪里(苹果黑夜模式在哪)

  • 淘宝同款便宜的跟贵的怎么选择(淘宝上同款质量一样吗)

    淘宝同款便宜的跟贵的怎么选择(淘宝上同款质量一样吗)

  • vivo音乐怎么卸载(vivo怎么删除i音乐app)

    vivo音乐怎么卸载(vivo怎么删除i音乐app)

  • 亲情账号可以看购物车(亲情账号可以看朋友圈吗)

    亲情账号可以看购物车(亲情账号可以看朋友圈吗)

  • 新电脑怎么装系统win10(新电脑怎么装系统教程)

    新电脑怎么装系统win10(新电脑怎么装系统教程)

  • 抖音能加微信好友吗(抖音加微信好友)

    抖音能加微信好友吗(抖音加微信好友)

  • 搜狗浏览器如何设置拦截(搜狗浏览器如何把网页保存到桌面)

    搜狗浏览器如何设置拦截(搜狗浏览器如何把网页保存到桌面)

  • 如何恢复充电宝容量(充电宝怎么恢复正常状态)

    如何恢复充电宝容量(充电宝怎么恢复正常状态)

  • VS Code上搭建Vue开发环境(visual studio code怎么创建vue项目)

    VS Code上搭建Vue开发环境(visual studio code怎么创建vue项目)

  • javaScript 合并对象的多种方式(js文件合并工具)

    javaScript 合并对象的多种方式(js文件合并工具)

  • 【Node.js+koa--后端管理系统】设计动态发布、修改、查询、删除接口(nodejs hook)

    【Node.js+koa--后端管理系统】设计动态发布、修改、查询、删除接口(nodejs hook)

  • 建筑业购买材料计入什么科目
  • 房地产开发企业资质证书
  • 会展服务费怎么开票
  • 保函费用是用来干什么的
  • 增值税进项税转出文件
  • 增值税专用发票可以开电子发票吗
  • 工业企业会计错账处理方法有哪些
  • 纳税人领购普通发票要求
  • 财务报表有哪些局限性
  • 工会经费如何做会计分录科目
  • 分配本月职工薪酬会计分录该怎么做合适?
  • 加油站的成品油许可证变更过后有什么风险
  • 进项已经抵扣会退回吗
  • 单位租用个人住房合法吗
  • 银行收付款通知短信
  • 个人股东从公司借款合法吗
  • 上海市购销合同印花税计税金额怎么算?
  • 税控盘清盘怎么做
  • 工会开票是否需要开户银行
  • 人力资源外包服务收费标准
  • 向关联企业支付管理费用可以税前扣除吗
  • 硝铵磷肥的肥效期
  • 推广费属于什么税收编码
  • 电脑开wifi给手机用好吗
  • win10无法设置pin码怎么办
  • 3%减按2%征收增值税政策
  • 以前年度损益调整会计分录
  • 清除文件夹exe病毒工具
  • wordpress访客记录怎么看
  • 已认证进项税发票可抵扣么
  • 摊余成本计入哪个科目
  • macos10.15.7补充更新
  • 货物退回的会计处理
  • 违约金的增值税税率
  • 微无界是什么软件
  • php实现邮箱验证码
  • php模糊查询txt文本
  • 设备维修产生的人工费怎么开发票
  • java开发和运维
  • 偿还应付账款会使得资产报酬率增加吗
  • 2023前端面试题目
  • es6对象扩展运算符
  • 应收账款周转率多少合适
  • 预缴与申报
  • 会计要离职了要注意几点
  • 工会经费可以发购物卡吗
  • 公司食堂吃饭没钱怎么办
  • mysql入门很简单
  • 财务报表怎么重新编制
  • 清卡操作流程
  • 权责发生制和收付实现制例题
  • 印花税是根据销售收入申报吗
  • 税控盘 金税盘
  • 出差的招待费算差旅费
  • sql server 2008 怎么使用
  • 小规模纳税人企业所得税怎么算
  • 纳税人办理普通发票流程
  • 存货盘亏有哪些情况
  • 长期股权投资减值准备
  • 会计科目表2023
  • 企业购买银行理财产品的会计处理
  • 电子税务局申报比对异常
  • 劳务公司拿什么挣钱
  • 其他流动资产为什么包括应交增值税
  • mysql事物的作用
  • sql语句去除重复值
  • ubuntu netbook
  • macbookpro鼠标触控板
  • windows8笔记本电脑
  • android studio ndk开发教程
  • quick cocos UIListView之isItemInViewRect方法修正
  • js 正则验证
  • 常见的css样式
  • jquery设计模式
  • Android Studio Attach source code
  • android网络通信http
  • nodejs抓取网页内容
  • 如何实现高质量发展
  • 如何用javascript
  • 国家税务总局2016年17号公告
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设