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

  • 如何注销滴滴车主车辆和账号(如何注销滴滴车主账号)

    如何注销滴滴车主车辆和账号(如何注销滴滴车主账号)

  • 小爱同学没反应(为什么喊小爱同学没反应)

    小爱同学没反应(为什么喊小爱同学没反应)

  • 为什么快手小黄车进不了淘宝(为什么快手小黄车里卖货发朋友圈不是自己的小店呢)

    为什么快手小黄车进不了淘宝(为什么快手小黄车里卖货发朋友圈不是自己的小店呢)

  • 快手怎么比较容易上热门(快手怎么样更容易上热门)

    快手怎么比较容易上热门(快手怎么样更容易上热门)

  • n3450相当于什么处理器(n3450什么水平)

    n3450相当于什么处理器(n3450什么水平)

  • 安卓手机可以改微信号吗(安卓手机可以改苹果id密码吗)

    安卓手机可以改微信号吗(安卓手机可以改苹果id密码吗)

  • 苹果x怎么设置不接听陌生电话(苹果x怎么设置呼叫转移其他号码)

    苹果x怎么设置不接听陌生电话(苹果x怎么设置呼叫转移其他号码)

  • 京东会员免运费吗(京东会员免运费只能在京东自营么)

    京东会员免运费吗(京东会员免运费只能在京东自营么)

  • 手机铃声不响了只会震动(苹果手机铃声不响了)

    手机铃声不响了只会震动(苹果手机铃声不响了)

  • 拍立得自拍镜怎么装(拍立得自拍镜怎么装卸)

    拍立得自拍镜怎么装(拍立得自拍镜怎么装卸)

  • 微信打招呼频率过高(微信打招呼频率过高是什么意思)

    微信打招呼频率过高(微信打招呼频率过高是什么意思)

  • 笔记本没有蓝牙功能可以自己装吗(笔记本没有蓝牙图标)

    笔记本没有蓝牙功能可以自己装吗(笔记本没有蓝牙图标)

  • qq27级是什么标志(qq等级27级是啥样的)

    qq27级是什么标志(qq等级27级是啥样的)

  • vivoy85a屏幕多大尺寸(vivo y85a屏幕尺寸)

    vivoy85a屏幕多大尺寸(vivo y85a屏幕尺寸)

  • 苹果可以把app里的视频保存到手机相册吗(苹果如何把app存进文件里?)

    苹果可以把app里的视频保存到手机相册吗(苹果如何把app存进文件里?)

  • 手机卡怎么激活(手机卡怎么激活移动卡)

    手机卡怎么激活(手机卡怎么激活移动卡)

  • 金立s10c锁屏怎么关壁纸(金立s10锁屏时间设置)

    金立s10c锁屏怎么关壁纸(金立s10锁屏时间设置)

  • 快手通讯录删了为什么还会显示(快手通讯录好友删了为什么还会出来)

    快手通讯录删了为什么还会显示(快手通讯录好友删了为什么还会出来)

  • 荣耀手环要一直开蓝牙吗(荣耀手环要一直开着蓝牙连手机么)

    荣耀手环要一直开蓝牙吗(荣耀手环要一直开着蓝牙连手机么)

  • 腾讯视频怎么面对面传(腾讯视频怎么面对面扫码登录)

    腾讯视频怎么面对面传(腾讯视频怎么面对面扫码登录)

  • 小爱无法连接无线网络(小爱连不上无线)

    小爱无法连接无线网络(小爱连不上无线)

  • xs max是双卡双待吗(xs max是不是双卡)

    xs max是双卡双待吗(xs max是不是双卡)

  • 苹果手机公开版和双网通版有什么区别(苹果手机公开版和合约版是什么意思)

    苹果手机公开版和双网通版有什么区别(苹果手机公开版和合约版是什么意思)

  • 电脑不能打字是怎么回事(电脑不能打字是怎么回事都是英文)

    电脑不能打字是怎么回事(电脑不能打字是怎么回事都是英文)

  • 手机投屏不投声音(手机投屏不投声音怎么弄)

    手机投屏不投声音(手机投屏不投声音怎么弄)

  • python中删除字典元素的方法有哪些?(python中删除字典里的空项目)

    python中删除字典元素的方法有哪些?(python中删除字典里的空项目)

  • 成本利润率和销售利润率哪个大
  • 既简易计税又一般计税的进项专票可以抵扣吗
  • 税金及附加如何记账
  • 出口退税逾期申报说明怎样写
  • 投资利税率包括所得税吗
  • 汇兑记载事项及使用注意事项
  • 从厂家拿货怎么谈价格
  • 费用日记账明细
  • 其他收益在报表哪个位置
  • 红字发票信息表需要盖章吗
  • 分公司办理税务需要什么东西
  • 工会签约有什么好处
  • 房产税细节
  • 收到承兑汇票作废怎么办
  • 会计职业道德的作用
  • 在文具公司工作怎么样
  • 待处理财产损益科目
  • 砂子开票税率
  • 体检合同属于什么合同
  • 生产型企业一般会有哪些外来文件
  • 计提资产减值损失账务处理
  • 工程建设劳务费怎么算
  • 实物出资需要发票吗
  • 上月预提的费用怎么记账
  • 华为mate50 pro
  • ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法 原创
  • 房地产土地使用税征收标准
  • vue项目中使用opencv
  • print函数php
  • c#怎么使用
  • 本地存储localstorage没有拿到最新值
  • ecshop功能
  • 企业一直亏损老板也赚钱
  • 研发费用加计扣除的条件
  • 工会经费计算公式的例子
  • 税负率一般控制什么
  • 小规模自开专票办理流程
  • 农业种植公司有补贴吗
  • 完税证明可以作废吗
  • 自然人独资交企业所得税吗
  • 装修行业小规模最高能开几个点的票
  • 小规模纳税人转一般纳税人当月如何申报
  • 住宿发票遗失怎么办
  • 资产减值损失科目
  • 短期流动负债计算公式
  • 委托代销商品支付的手续费计入销售费用吗
  • 收到的出口退税款需要并入利润总额吗
  • 单位租赁个人房子怎么缴纳房产税
  • 项目开票分录
  • 收付实现制下主营业务成本怎么算
  • 总分类账示例
  • 明细账怎么弄
  • sql server2008启动
  • sql语句大全实例教程
  • 删除windowsapp
  • windows server 2008 r2激活密钥
  • win7电脑怎么设置
  • mac闹钟app
  • mac电脑上的通讯录怎么同步到手机上
  • centos6.7防火墙
  • xp系统的程序和功能在哪里
  • diy组装电脑前置怎么样
  • win8 更改电脑设置
  • windows 查看补丁
  • 凭据管理器 win10
  • vb6.0win10安装教程
  • 安卓百分百
  • perl -p -e
  • js页面点击怎么随机生成图片
  • javascript如何调用
  • 易信安卓手机版
  • preorder遍历
  • 浅析中国式现代化的理论价值与现实意义
  • jquery 控制暂停和播放
  • 复制链接
  • dota2 服务器ip地址
  • iframe内容自适应缩放
  • javascript基础书
  • 最简单手电筒
  • 运输类税点
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设