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

  • 怎样增加腾讯微博粉丝数量(如何增加微信腾讯服务)

    怎样增加腾讯微博粉丝数量(如何增加微信腾讯服务)

  • 荣耀v40轻奢版语音助手怎么唤醒(荣耀V40轻奢版语音唤醒)

    荣耀v40轻奢版语音助手怎么唤醒(荣耀V40轻奢版语音唤醒)

  • ppt设置自动播放时间为10秒(怎么关闭ppt的自动播放)

    ppt设置自动播放时间为10秒(怎么关闭ppt的自动播放)

  • 怎样进入抖音直播间(怎样进入抖音直播间不显示名字)

    怎样进入抖音直播间(怎样进入抖音直播间不显示名字)

  • ps5美版和港版区别(ps5美版和港版区别大吗)

    ps5美版和港版区别(ps5美版和港版区别大吗)

  • 华为应用验证失败(华为应用验证失败建议安装官方)

    华为应用验证失败(华为应用验证失败建议安装官方)

  • 手机屏幕边上出现黄边(手机屏幕边上出现紫色)

    手机屏幕边上出现黄边(手机屏幕边上出现紫色)

  • dns异常是路由器坏了吗(dns异常无线路由器)

    dns异常是路由器坏了吗(dns异常无线路由器)

  • 苹果电脑没有鼠标怎么右键(苹果电脑没有鼠标怎么操作)

    苹果电脑没有鼠标怎么右键(苹果电脑没有鼠标怎么操作)

  • 电脑突然打不了字是什么原因(电脑突然打不了数字是什么原因)

    电脑突然打不了字是什么原因(电脑突然打不了数字是什么原因)

  • e04授权丢失怎么办(e04授权丢失啥意思)

    e04授权丢失怎么办(e04授权丢失啥意思)

  • word封面下划线怎么打(word封面下划线怎么设置对齐)

    word封面下划线怎么打(word封面下划线怎么设置对齐)

  • 快手特别关注有什么用(快手特别关注有上限怎么办)

    快手特别关注有什么用(快手特别关注有上限怎么办)

  • 坚果手机是哪国的产品(坚果手机是哪里的)

    坚果手机是哪国的产品(坚果手机是哪里的)

  • word选项卡不见了(word中选项卡隐藏了怎么办)

    word选项卡不见了(word中选项卡隐藏了怎么办)

  • 手机通讯录背景怎么换(手机通讯录背景黑色怎么变白)

    手机通讯录背景怎么换(手机通讯录背景黑色怎么变白)

  • 手机动态壁纸怎么弄的(手机动态壁纸怎么设置)

    手机动态壁纸怎么弄的(手机动态壁纸怎么设置)

  • 淘宝两人拼团怎么发货(淘宝怎么和好友拼单)

    淘宝两人拼团怎么发货(淘宝怎么和好友拼单)

  • 手机拍视频如何不抖动(手机拍视频如何去掉声音)

    手机拍视频如何不抖动(手机拍视频如何去掉声音)

  • 网络异常通话结束是什么意思(网络异常通话结束)

    网络异常通话结束是什么意思(网络异常通话结束)

  • 华为plktl00是什么型(华为plkul00是什么型号)

    华为plktl00是什么型(华为plkul00是什么型号)

  • win10怎么整理磁盘(w10怎么磁盘整理)

    win10怎么整理磁盘(w10怎么磁盘整理)

  • 苹果十一是5g吗(iphone十一是5g吗)

    苹果十一是5g吗(iphone十一是5g吗)

  • iphone11和iphone11pro的区别(iphone11和iphone11promax哪个好)

    iphone11和iphone11pro的区别(iphone11和iphone11promax哪个好)

  • 华为p20耳机孔在哪(华为p20耳机口插了没反应)

    华为p20耳机孔在哪(华为p20耳机口插了没反应)

  • 苹果耳机左右音量怎么不一样(苹果耳机左右音量不一样)

    苹果耳机左右音量怎么不一样(苹果耳机左右音量不一样)

  • iphonexs max什么时候出的(iPhonexsmax什么时候停止售卖的)

    iphonexs max什么时候出的(iPhonexsmax什么时候停止售卖的)

  • a1784是什么版本(苹果a1784是什么版本)

    a1784是什么版本(苹果a1784是什么版本)

  • 德拉海滩Wakodahatchee湿地的大蓝鹭,佛罗里达州 (© Marie Hickman/Getty Images)(海滨德拉海滩庄园别墅)

    德拉海滩Wakodahatchee湿地的大蓝鹭,佛罗里达州 (© Marie Hickman/Getty Images)(海滨德拉海滩庄园别墅)

  • 收到个税返还手续费怎么算增值税附加
  • 湖南个税申报系统app
  • 城建税计税依据公式
  • 一个季度超过30万怎么做账
  • 商品流通企业印花税购销合同计税依据
  • 税前弥补亏损是净利润吗
  • 银行存款属于其他货币资金核算内容吗
  • 劳务费免税发票的政策规定
  • 季初资产总额是1,季末是0怎么填
  • 税控盘服务费减免税会计分录
  • 个人所得税允许扣除的费用
  • 委托代销受托方怎么做账
  • 保险公司返点啥意思
  • 医院收到卫生局补助会计分录怎么写
  • 材料实际成本的会计分录
  • 本月完工产品的会计分录
  • 承兑汇票打折支付如何账务处理?
  • 一般纳税人的含税收入怎么算
  • 开票方与受票方的区别
  • 长期股权投资成本法发放现金股利
  • 一般纳税人增值税申报表
  • 外方获得的利润怎么算
  • 公积金贷款利息现在是多少
  • 实收资本不是股东打来的怎么调帐
  • 个体户经营所得核定税率
  • 房企的预收账款是什么
  • 商场赠送购物券是真的吗
  • 小额纳税人增值税专用发票税率1%
  • 开票的附加税是多少
  • mac怎么设置默认程序
  • PHP:curl_share_close()的用法_cURL函数
  • mini program是什么
  • 购进旧设备折旧年限如何计算
  • 个体工商户加盟咖啡店
  • 赔付支出有哪些
  • php图片大小设置
  • PHP:imagefilltoborder()的用法_GD库图像处理函数
  • 收到员工罚款分录
  • 资产负债表和利润表的认定
  • php网站安全防护
  • echarts在地图上标记图标
  • 完美解决win10间歇性掉线
  • Laravel5中防止XSS跨站攻击的方法
  • ps中文字复制粘贴
  • 农业企业所得税是免税的吗
  • 基建工程转固定资产
  • 发票验证校验码为什么只能填6位
  • 滴滴出行发票税率是多少
  • 将购入的原材料用于不动产在建工程
  • 小微企业认定办法
  • 外贸客户付款方式
  • php图片格式转换
  • 母子公司收入合并
  • 机会成本的特点有()
  • 用现金支付的款项
  • 资产处置损益借贷方向表示什么
  • mysql与oracle的区别
  • sql复制表的语句
  • bios如何关闭网卡
  • 怎样一键重装
  • crypt什么文件
  • wbs是什么文件
  • win7桌面记事本
  • win8开机启动
  • win8 无线网
  • linux的发展
  • 双系统重装win11
  • linux如何释放内存空间
  • windowxp怎么设置密码
  • mac文稿怎么查看字数
  • win102020h2版本
  • win7任务栏透明调不了
  • ajax分页查询数据文档效果图
  • perl常用函数
  • 狗刨好学吗
  • python 内连接
  • python怎么爬
  • js中prototype的作用
  • jQuery中使用animate自定义动画的方法
  • 重庆税务电子发票登录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设