位置: IT常识 - 正文

Vue前端:几种搜索框功能实现(vue.js前端)

编辑:rootadmin
Vue前端:几种搜索框功能实现 Vue前端:几种搜索框功能实现前言一、搜索框输入内容自动检索(1)检索到输入新的内容后,就自动向后端发送查找请求(即时搜索)(2)一次请求搜索到所有可能需要的数据,然后根据搜索框中的内容进行数据过滤二、点击搜索按钮再开始搜索总结前言

推荐整理分享Vue前端:几种搜索框功能实现(vue.js前端),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue前端开发工具,vue前端开发工具,vue前端菜鸟教程,vue前端代码实例,vue前端项目实战,vue前端搜索,vue前端页面查询功能怎么实现,vue前端搜索,内容如对您有帮助,希望把文章链接给更多的朋友!

相信很多朋友遇到需要在网页上增加一个搜索框的功能,本文简单介绍两种搜索框的实现。 搜索框的功能一般分为: (1)即时检索,即搜索框输入内容自动检索,会随着搜索内容的不断输入,改变界面的显示 (2)点击搜索按钮再开始搜索

以下分别介绍这两种搜索框的简单实现方式。

一、搜索框输入内容自动检索

实现搜索框输入内容自动检索功能,可以再分为两种情况实现。

(1)检索到输入新的内容后,就自动向后端发送查找请求(即时搜索)

这种设计,类似于现在的百度搜索,就是在搜索框输入一段内容后,会自动发起一次查找数据请求,界面自然就显示新的内容。 优点: 这种设计会显的很智能,不需要点搜索框即可检索,搜索起来更加快速高效,使用起来更加跟手。 缺点: 1)需要搜索的内容可能是一部分一部分输入的,每次搜索框新增内容就去搜索,往往不能得到真正想要的结果; 2)如果分段输入搜索内容的次数过多,会导致请求服务器响应的次数过多,一个用户在完成一次有效的检索过程中,可能需要多次的请求服务器响应,服务器性能、网络资源等会被严重浪费,同时使用用户过多可能导致服务器响应较慢,严重会导致服务器崩溃。

需要注意: 即时检索在使用的时候为了不浪费过多资源,往往需要限制发请求的时间或者需要搜索的内容量,即每过一段时间或需要搜索的内容量达到一定条件才发送请求。

Vue前端:几种搜索框功能实现(vue.js前端)

以下内容来自: input搜索框实时检索功能实现

参考代码:

methods: { //使用_.debounce控制搜索的触发频率 //准备搜索 search: _.debounce( function () { let that = this; //删除已经结束的请求 _.remove(sources, function (n) { return n.source === null; }); //取消还未结束的请求 sources.forEach(function (item) { if (item !== null && item.source !== null && item.status === 1) { item.status = 0; item.source.cancel('取消上一个') } }); //创建新的请求cancelToken,并设置状态请求中 var sc = { source: axios.CancelToken.source(), status: 1 //状态1:请求中,0:取消中 }; //这个对象加入数组中 sources.push(sc); //开始搜索数据,yourhttp替换成你自己的请求路径 axios.get('yourhttp', { cancelToken: sc.source.token }).then(function (res) { //请求成功 sc.source = null; //置空请求canceltoken //TODO这里处理搜索结果 console.log(res.data); that.result = res.data; }).catch(function (thrown) { //请求失败 sc.source = null; //置空请求canceltoken //下面的逻辑其实测试用 if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { //handle error } }); }, 500 //空闲时间间隔设置500ms )}(2)一次请求搜索到所有可能需要的数据,然后根据搜索框中的内容进行数据过滤

如果: 1)搜索框的内容相对固定,不像百度等网站需要对不同的搜索内容进行兼容,数据库整体数据量也不是很大 2)服务器性能有限,希望尽量减少请求服务器响应次数

我们可以采用一次请求搜索到所有可能需要的数据,然后根据搜索框中的内容进行数据过滤,显示需要的数据 为了实现这个效果,我们可以使用Vue的Filter函数进行数据的过滤。过滤器整体分为局部过滤器和全局过滤器。

过滤器具体实现可以参考以下链接: Vue.js中过滤器(filter)的使用

我这里再介绍一种过滤器的使用,是我目前在使用的方式,这种方式和链接中的使用方式不太相同,相对简单直接,看起来也很好懂,还能实现多页面的切换功能。 话不多说上代码!

result_Lists() { let start = (this.pageNo - 1) * this.pageSize; //定义显示的第一条数据编号 let end = start + this.pageSize;//根据起始编号和每页规定的显示数量,定义显示的最后条数据编号 //返回经过过滤的数据 return this.result.filter(item => (item.content && item.content.includes(this.searchContent)) ).slice(start, end); //简单介绍slice(start,end): //方法可从已有数组中返回选定的元素,返回一个新数组,包含从start到end(不包含该元素)的数组元素。}

这种实现方式呢,我个人认为更加简单直接,很好懂,还能很好的配合多页面的切换,根据页面定义的每页显示的数据条数可以自动切换需要显示的数据数量。

二、点击搜索按钮再开始搜索

点击搜索按钮再开始搜索应该是最常见、最普通、最简单的一种搜索方式。给搜索按钮绑定事件,点击搜索后向后端发请求,前端根据后端返回值在页面显示即可,这里不再赘述。

Vue前后端交互链接: 三、vue前后端交互(轻松入门vue)

总结

本文介绍了几种搜索框常见的实现方式,特别推荐的是我在用的过滤器使用方式,实测很好用,很简单。 希望对大家有用!

本文链接地址:https://www.jiuchutong.com/zhishi/283949.html 转载请保留说明!

上一篇:noads.exe - noads是什么进程 有什么用

下一篇:KB5005322某些设备在安装 KB5003214和 KB5003690后无法安装新更新(此设备某些文件可能存在问题)

  • 营销的百年迭代史(百年营销史总结)

    营销的百年迭代史(百年营销史总结)

  • 华硕x43b怎么进入u盘启动(华硕x43b)(华硕x43b怎么进入bios)

    华硕x43b怎么进入u盘启动(华硕x43b)(华硕x43b怎么进入bios)

  • oppo手机黑白屏怎么调成彩色的(oppo手机黑白屏了怎么恢复正常)

    oppo手机黑白屏怎么调成彩色的(oppo手机黑白屏了怎么恢复正常)

  • 微信群500人满了还能加人吗(微信群500人满了怎么弄1000人)

    微信群500人满了还能加人吗(微信群500人满了怎么弄1000人)

  • 苹果8可以复制门禁卡吗(苹果8可以复制卡吗)

    苹果8可以复制门禁卡吗(苹果8可以复制卡吗)

  • 不拉黑好友但要隐藏(不拉黑好友但要隐藏好友后通讯录里有没有好友头像了)

    不拉黑好友但要隐藏(不拉黑好友但要隐藏好友后通讯录里有没有好友头像了)

  • 华为手机电池鼓包了还能用吗(华为手机电池鼓起来了,把后盖顶起来了)

    华为手机电池鼓包了还能用吗(华为手机电池鼓起来了,把后盖顶起来了)

  • 什么时候可以更新MIUI12啊(什么时候可以更新ios17)

    什么时候可以更新MIUI12啊(什么时候可以更新ios17)

  • 笔记本删除键是哪个(笔记本删除键是哪两个键)

    笔记本删除键是哪个(笔记本删除键是哪两个键)

  • 苹果7蜂窝数据错误怎么处理(苹果7蜂窝数据显示错误怎么办)

    苹果7蜂窝数据错误怎么处理(苹果7蜂窝数据显示错误怎么办)

  • 淘宝与天猫的区别在哪(淘宝和天猫有什么不同之处)

    淘宝与天猫的区别在哪(淘宝和天猫有什么不同之处)

  • 手机端是什么意思啊(手机端是什么意思英语简称)

    手机端是什么意思啊(手机端是什么意思英语简称)

  • 抖音上传照片也可加道具吗(抖音上传照片别人看不到是怎么回事)

    抖音上传照片也可加道具吗(抖音上传照片别人看不到是怎么回事)

  • 钉钉直播开浮窗算不算时间(钉钉直播开浮窗计时吗)

    钉钉直播开浮窗算不算时间(钉钉直播开浮窗计时吗)

  • 无限局域网和蜂窝网络什么意思(无限局域网和蜂窝网络一起开着的时候流量算谁的)

    无限局域网和蜂窝网络什么意思(无限局域网和蜂窝网络一起开着的时候流量算谁的)

  • 微信里面我的企业怎么删除(微信里面我的企业怎么删除掉)

    微信里面我的企业怎么删除(微信里面我的企业怎么删除掉)

  • 导航卡是不是内存卡(导航卡是什么)

    导航卡是不是内存卡(导航卡是什么)

  • vivo手机悬浮窗在哪里(vivo手机悬浮窗口怎么关闭)

    vivo手机悬浮窗在哪里(vivo手机悬浮窗口怎么关闭)

  • word中格式选项在哪(word中格式选项卡)

    word中格式选项在哪(word中格式选项卡)

  • 苹果手机浮标怎么去掉(苹果手机浮标怎么打开)

    苹果手机浮标怎么去掉(苹果手机浮标怎么打开)

  • 借助redis实现对IP限流(redis提供了对值进行运算的命令)

    借助redis实现对IP限流(redis提供了对值进行运算的命令)

  • 房产税计税依据包括土地价值吗
  • 公司处理固定资产的账务处理
  • 应交税费明细科目怎么记账
  • 所得税费用怎么计提
  • 什么是商业汇票和银行汇票
  • 应收账款计入借方贷方
  • 主营业务收入体现在资产负债表哪里
  • 其他收益在报表哪个位置
  • 小规模企业所得税税率多少
  • 自产产品用于业务宣传确认收入吗
  • 土地违约金怎么写合同
  • 行政事业单位餐标
  • 专利技术评估价值入股价偏高说明什么
  • 税负率过低进行什么交易
  • 车辆购置税退税申请表
  • 商业地产会计核算流程
  • 对方电子承兑发出多长时间可以到账
  • 租赁厂房算什么费用
  • 减免税期间是什么意思
  • 2018年生育保险报销
  • 代开专用发票的数量单价单位怎么写?
  • 年底进项税和销项税怎么记
  • 公司个税申报是什么意思
  • 增值税即征即退属于政府补助吗
  • 电子承兑转让怎么撤销
  • 库存商品的核算方法
  • 收工资扣款账务处理流程
  • 公司名下的车怎么上牌
  • 监控 固定资产
  • 提供给生产工人的住房的租赁费用应计入
  • 其他业务收入不影响营业利润
  • 苹果系统中怎么删除软件
  • 结转消费成本的会计分录
  • 企业自行搬迁需要交税吗
  • 利得的具体分类
  • 预付采购材料货款
  • 广告代理费制度
  • vue框架是什么样子的
  • 我初次尝试制作的英文怎么写
  • 前端经典面试题及答案
  • set_ccopt_property
  • 命名空间 php
  • 飞机票抵扣进项税含民航发展基金吗
  • 小企业会计准则外币业务
  • 小微公司开票
  • 企业的对公账户怎么办理
  • 资产处置收益的账务处理
  • 织梦怎么导入数据库
  • 欠对方钱对方公司已注销
  • 小规模企业所得税怎么征收
  • 长期应付款项目,根据专项应付款和长期应付款
  • sql server2005使用方法
  • 可明确区分的商品什么意思
  • 如何降低应收账款成本
  • 商场一般是怎么缴纳租金的
  • 税控盘上报
  • 优惠券抵扣账务处理流程
  • 固定资产的折旧标准
  • 开空头发票犯法吗
  • 金融资产发生的负债包括
  • 预收账款转收入的条件
  • 劳务费免税发票怎么开
  • 什么是现金流量表
  • 预付调整到其他应付款
  • 工会经费不够
  • 用mysql的小技巧
  • 删除数据库重复
  • win10系统开机出现
  • ubuntu20.04 vim
  • Windows XP英文版序列号
  • mac怎么自定义桌面图标
  • linux计划任务不生效
  • win10家庭版怎么关闭windows defender
  • node.js连接mysql的数据怎么可视化
  • 安装运行windows
  • dosbox终止程序
  • unity协程会阻塞主线程吗
  • js写日期
  • springmvc返回json格式的注解
  • 一般纳税人企业是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设