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

  • 苹果13怎么无线充电(苹果13怎么无线连接电脑)

    苹果13怎么无线充电(苹果13怎么无线连接电脑)

  • 哈啰单车怎么手机关锁还车(哈啰单车怎么手动续费)

    哈啰单车怎么手机关锁还车(哈啰单车怎么手动续费)

  • 电脑减号怎么打(电脑里减号怎么打)

    电脑减号怎么打(电脑里减号怎么打)

  • 微信早上自动发消息怎么设置(微信早上自动发图片怎么设置)

    微信早上自动发消息怎么设置(微信早上自动发图片怎么设置)

  • 芒果tv骑士卡是什么

    芒果tv骑士卡是什么

  • 拼多多没有电脑版本吗(拼多多没有电脑怎么退店)

    拼多多没有电脑版本吗(拼多多没有电脑怎么退店)

  • 苹果手机没来电铃声了怎么回事(苹果手机没来电铃声从哪调?)

    苹果手机没来电铃声了怎么回事(苹果手机没来电铃声从哪调?)

  • 华为手机一年内可以免费换屏吗(华为手机一年内屏幕碎了保修吗)

    华为手机一年内可以免费换屏吗(华为手机一年内屏幕碎了保修吗)

  • m1136mfp打印机换墨(m1136mfp打印机换墨盒)

    m1136mfp打印机换墨(m1136mfp打印机换墨盒)

  • 表示主程序结束的功能指令是(表示主程序结束的指令是哪一个)

    表示主程序结束的功能指令是(表示主程序结束的指令是哪一个)

  • 5g将建立一个具有什么特点的平台(打造5g)

    5g将建立一个具有什么特点的平台(打造5g)

  • 微信退群有通知吗(微信退群的人聊天记录还在吗)

    微信退群有通知吗(微信退群的人聊天记录还在吗)

  • 饿了吗取消订单会退款吗(饿了么取消订单怎么申诉才能成功)

    饿了吗取消订单会退款吗(饿了么取消订单怎么申诉才能成功)

  • excel文件扩展名是什么(excel文件扩展名指定的格式不一致)

    excel文件扩展名是什么(excel文件扩展名指定的格式不一致)

  • opporeno手机微信视频通话怎么美颜(opporeno手机微信语音断断续续怎)

    opporeno手机微信视频通话怎么美颜(opporeno手机微信语音断断续续怎)

  • mtp是什么驱动程序(mtp driver)

    mtp是什么驱动程序(mtp driver)

  • 个人能申请抖音蓝V吗(个人能申请抖音企业号吗)

    个人能申请抖音蓝V吗(个人能申请抖音企业号吗)

  • 计算机中运算器的作用(计算机中运算器和控制器合称什么)

    计算机中运算器的作用(计算机中运算器和控制器合称什么)

  • 华为mate30pro手写笔在哪(华为mate30手写设置在哪)

    华为mate30pro手写笔在哪(华为mate30手写设置在哪)

  • 抖音看不到自己的动态(抖音看不到自己作品的转发量)

    抖音看不到自己的动态(抖音看不到自己作品的转发量)

  • 钉钉没有声音怎么设置(钉钉没有声音怎么办)

    钉钉没有声音怎么设置(钉钉没有声音怎么办)

  • 手机淘宝信誉评级图在哪看(手机淘宝信誉评价怎么看)

    手机淘宝信誉评级图在哪看(手机淘宝信誉评价怎么看)

  • 波折号怎么打(破折号怎么打出来)

    波折号怎么打(破折号怎么打出来)

  • 陌陌310什么意思(陌陌上310什么意思)

    陌陌310什么意思(陌陌上310什么意思)

  • 1200毫安能给手机充多少电(1200毫安手机能用多久)

    1200毫安能给手机充多少电(1200毫安手机能用多久)

  • 企业所得税更正申报要交滞纳金吗
  • 进项税额怎么计算例题
  • 交了9个点的工程增值税不可以抵扣吗
  • 公司章程在工商局
  • 承兑找零怎么做账务处理
  • 减免税金需要计提吗
  • 企业管理咨询有限公司简介
  • 社保扣除的是当月还是上个月的
  • 含有增值税的工程项目
  • 来料加工账务处理方法
  • 公司阅览室布置图片
  • 建筑业购进苗木进项抵税计算公式是什么
  • 会务费 发票
  • 公司成本票不够交税多少
  • 如何确定增值税
  • 建筑企业结转成本依据准则
  • 会计计提和冲回
  • 城镇退役士兵安置条例
  • win10无internet怎么解决
  • 如何在vue项目中导入外部的包
  • 劳务公司发放农民工工资要开发票吗?
  • 在win7中,如何搜索指定扩展名的文件
  • Mac苹果系统怎么转换中文
  • 租赁费和场地租赁费区别
  • 其它业务收入是什么科目
  • 出租固定资产取得的净收益计入什么科目
  • 顺流交易合并抵消 chenyiwei
  • PHP:pcntl_setpriority()的用法_PCNTL函数
  • 融资租赁综合利息计算
  • 同业代付融资
  • php add
  • 企业要缴哪些税种
  • php反射获取方法参数
  • 工程项目科学技术方法工具过程之间的关系
  • 建设工程项目设计质量控制的内容
  • [JavaScript你真的以为这么简单吗]JavaScript高级
  • 哪些发票是成品发票
  • 企业所得税利息费用的扣除标准
  • vue的内置组件
  • vue2-elm
  • php限制
  • 命令行 压缩
  • 怎么理解中国实际
  • 没有取得发票就把车卖了违法吗
  • PHP魔术方法的作用
  • mysql集群三种方式
  • 林木的培育和种植免征企业所得税
  • 增值税退税流程怎么操作
  • 什么企业不用交残保金
  • 深圳增值税普通发票和专用发票的区别
  • 劳务公司已开票怎么入账
  • 代开租金发票的税金怎样入账?
  • 年底销项税额和进项税额要转出吗
  • 暂估入库后发票来不了会计分录
  • 先开票后发货的会计分录
  • redhat server
  • xp系统经常未响应怎么办
  • auepuc.exe是什么软件
  • WinAce.exe - WinAce是什么进程
  • encore是什么软件
  • imac 2010 cpu
  • centos7自签名证书
  • win10打开此电脑的快捷键
  • 进程 电脑
  • WIN10系统怎么改成泰语
  • linux命令find用法
  • [置顶] 此外,车牌号:458143(懂得都懂[吃瓜])
  • MVC Ajax Helper或Jquery异步加载部分视图
  • html淘宝搜索框代码
  • shell脚本语句
  • 批处理注册reg文件
  • unity中canvas怎么调框大小
  • easyui getselections
  • jquery升级
  • shell脚本读取输入使用什么命令
  • python魔法方法详解
  • jquery前端开发实战教程课后题答案
  • 安卓中的多线程
  • 小米之家可以
  • 出口退税的期限是多长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设