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

  • 苹果官网如何使用教育优惠(苹果官网如何使用)

    苹果官网如何使用教育优惠(苹果官网如何使用)

  • 双卡双待是什么意思(双卡双待是什么家庭)

    双卡双待是什么意思(双卡双待是什么家庭)

  • 苹果手机卡槽不读卡如何修理(苹果手机卡槽不用针怎么打开)

    苹果手机卡槽不读卡如何修理(苹果手机卡槽不用针怎么打开)

  • vivo手机怎么添加分屏应用(vivo手机怎么添加公交卡)

    vivo手机怎么添加分屏应用(vivo手机怎么添加公交卡)

  • 怎么看手机是否全局dac(怎么看手机是否被别人定位了)

    怎么看手机是否全局dac(怎么看手机是否被别人定位了)

  • 华为平板横屏无法全屏(华为平板横屏无法全屏钉钉)

    华为平板横屏无法全屏(华为平板横屏无法全屏钉钉)

  • qq邮箱邮件加载失败怎么办(qq邮箱加载失败是什么原因)

    qq邮箱邮件加载失败怎么办(qq邮箱加载失败是什么原因)

  • 抖音怎么不显示右边(抖音怎么不显示ip地址)

    抖音怎么不显示右边(抖音怎么不显示ip地址)

  • 什么软件可以把照片做成视频(什么软件可以把文字转换成语音)

    什么软件可以把照片做成视频(什么软件可以把文字转换成语音)

  • 美团买了会员能退吗(美团会员买完之后可以退款吗)

    美团买了会员能退吗(美团会员买完之后可以退款吗)

  • 苹果11屏幕自动变暗(苹果11屏幕自动亮怎么关闭)

    苹果11屏幕自动变暗(苹果11屏幕自动亮怎么关闭)

  • 微信封号8天后可以正常登录了吗(微信封号8天之后能不能用了)

    微信封号8天后可以正常登录了吗(微信封号8天之后能不能用了)

  • 已发的朋友圈怎么修改(已发的朋友圈怎么修改内容)

    已发的朋友圈怎么修改(已发的朋友圈怎么修改内容)

  • 搜狗打字声音怎么关闭(搜狗打字声音怎么没有了)

    搜狗打字声音怎么关闭(搜狗打字声音怎么没有了)

  • ipad2018录音功能在哪(ipad2019录音功能在哪)

    ipad2018录音功能在哪(ipad2019录音功能在哪)

  • 微机工作的基本原理(微机工作过程的实质是什么)

    微机工作的基本原理(微机工作过程的实质是什么)

  • 抖音主播可以设置几个管理员(抖音主播可以设置超管吗)

    抖音主播可以设置几个管理员(抖音主播可以设置超管吗)

  • 照片大小怎么改到2m(照片大小怎么改到10k)

    照片大小怎么改到2m(照片大小怎么改到10k)

  • vivo手机怎么截屏幕图(vivo手机怎么截屏保存图片)

    vivo手机怎么截屏幕图(vivo手机怎么截屏保存图片)

  • 画图的窗口几部分(画图窗口中都包括什么)

    画图的窗口几部分(画图窗口中都包括什么)

  • web安全主要分为哪几类(web安全主要分为以下几个方面)

    web安全主要分为哪几类(web安全主要分为以下几个方面)

  • 淘宝漏发不承认怎么办(淘宝漏发不处理怎么办)

    淘宝漏发不承认怎么办(淘宝漏发不处理怎么办)

  • 荣耀20广角怎么打开(荣耀广角怎么拍)

    荣耀20广角怎么打开(荣耀广角怎么拍)

  • vivoy93和y93s手机壳通用吗(vivoy93和y93s手机膜大小一样么)

    vivoy93和y93s手机壳通用吗(vivoy93和y93s手机膜大小一样么)

  • qq封七天有办法解封么(qq封禁七天怎么解开)

    qq封七天有办法解封么(qq封禁七天怎么解开)

  • 调整系统保留带宽(调整系统保留带宽的命令)

    调整系统保留带宽(调整系统保留带宽的命令)

  • 力拓河中含矿物质的水,西班牙里奥廷托矿区 (© David Santiago Garcia/Getty Images)(全球矿业巨头力拓集团)

    力拓河中含矿物质的水,西班牙里奥廷托矿区 (© David Santiago Garcia/Getty Images)(全球矿业巨头力拓集团)

  • 解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑)

    解决echarts报错Cannot read properties of null (reading ‘getAttribute‘)(echarts遇到的坑)

  • GPT-4技术报告(gpt 4927)

    GPT-4技术报告(gpt 4927)

  • 物流辅助服务税率
  • 存货的期末余额在借方还是贷方
  • 小型微利企业季度申报
  • 上月有留抵税额本月怎么申报
  • 农产品普通发票抵扣政策
  • 开办期间的财务会计制度
  • 税款所属期什么意思
  • 债券到期收益率计算器
  • 投资企业应确认投资收益的有
  • 国税注销地税没注销怎么办
  • 购入但未开始使用的房产
  • 小规模纳税人企业所得税怎么计算
  • 合伙企业个人所得税经营所得怎么申报
  • 房地产土地抵扣
  • 印花税季度报还是月报
  • 6位开票代码是几位数
  • 公司购买物品流程
  • 购入低值易耗品计入什么科目
  • 股票交易的印花税和手续费是多少
  • 企业所得税怎么征收
  • 补提以前年度摊销
  • 个税专项附加扣除是什么意思
  • 跨年度所得税多怎么办
  • w10关闭远程
  • 固定资产原值减少说明什么
  • qtzgacer.exe - qtzgacer进程是什么文件 .作用是什么
  • linux服务器常用命令
  • 国地税合并有什么角度写论文
  • pgptray.exe - pgptray是什么进程 有什么用
  • 亏损销售怎么结转库存成本怎么计算
  • 房地产开发企业销售自行开发的房地产项目
  • 民间非营利组织会计制度
  • 海关进口税可以抵扣吗
  • 房产契税滞纳金如何减免
  • 非征期不能抄报
  • javaweb购物
  • vue3 $bus
  • spring的aoc和aop
  • 清算汇缴报表填什么内容
  • 科目汇总表借方发生额为零怎么填
  • 企业购买机器设备没有发票怎么办
  • 税前扣除项目应遵循哪些原则
  • 异地工程预缴税款时间
  • 递延所得税资产和所得税费用的关系
  • 房地产开发费用最高扣除比例
  • 年度财务报表分为哪几类
  • 零税率与免税有何区别
  • 费用减少利润减少的情况
  • 预付账款大幅增加说明
  • 存货盘亏毁损处理方法
  • 待抵扣进项税额是二级还是三级
  • 餐饮开票税率
  • 企业进项税额如何账务处理
  • 对于事业单位无力支付的银行承兑汇票
  • 地方水利建设基金怎么计算
  • 子公司的亏损能算到母公司吗
  • 企业营运能力分析
  • 运费是属于什么会计科目
  • 工业企业进项税和销项税均为17%
  • mysql详细教程
  • fedora os
  • 关闭win10操作系统,相当于
  • 映泰重装系统按什么
  • win10电脑无权限访问文件怎么解除
  • win10没有显示
  • ati2sgag.exe进程安全吗 ati2sgag进程信息查询
  • winxp共享打印机win11
  • centos为什么没有桌面
  • win10的显示
  • jQuery的ajax中使用FormData实现页面无刷新上传功能
  • Unity3D游戏开发引擎
  • sdk有问题
  • fragment生命周期图
  • 车库契税怎么收费
  • 住房公积金补扣
  • 我们如何理解税收意义
  • 掌上海关怎么查询
  • 青海国税局官网
  • 如何推进社会治理
  • 教师资格证认定流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设