位置: 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后无法安装新更新(此设备某些文件可能存在问题)

  • 航天信息金税盘未打开
  • 2021年餐饮业的税率是多少?
  • 没有发票先入账怎么办
  • 税金及附加可以为负数吗
  • 小规模纳税人的起征点是多少
  • 房产租金收入房产税
  • 收到科技局的补贴短信
  • 运输增值税专票含税价怎么算
  • 代理进口产品需要什么手续
  • 免税单位无租使用纳税单位土地
  • 适用简易计税方法的口诀
  • 差额征税的小微企业免税销售额
  • 预缴企业所得税分录
  • 理发店财务分析报告
  • 重置申报清册是什么意思
  • 个人承包承租经营所得采用什么税率
  • 进项税额忘了抵扣
  • 企业所得税分期收款确认收入的时间政策
  • 继承房产再出售满五是按老证还是按新证计算时间
  • 低值易耗品怎么结转
  • 广告公司的收入增加原因
  • 征信费用会计分录
  • 预提费用的会计分录2018
  • 个人从价计征房产税
  • 小规模纳税人可以开增值税专用发票吗
  • 白醋洗脸有什么好处
  • php关联数组转索引数组
  • php中删除文件的函数
  • yii2.0使用Plupload实现带缩放功能的多图上传
  • 小规模纳税人冲红发票怎么报税
  • 实物折扣例题
  • 浅谈php技术
  • 处置工程物资取得净收益
  • 城镇土地使用税纳税义务发生时间
  • unity udim
  • 存货毁损计入什么科目
  • 什么是印花税,怎么征收
  • 防伪税控开票
  • sqlserver2008误操作数据
  • mysql_assoc
  • 酒店营业税率是多少
  • 开票一定要确认收入嘛
  • 账面成本与账面余额
  • sql怎么用sql语句创建表
  • 认缴制和实缴制的法律责任
  • 购车的车辆购置税计入固定资产可以所得税一次性扣除吗
  • 现金流量表中的现金流量包括哪些
  • 限定性净资产包括哪三个方面
  • 从内地到香港坐飞机到国内
  • 农产品委托代销增值税怎么算
  • 红冲以前年度费用
  • 购房契税如何入账
  • 小规模纳税人销售要交税吗
  • 增值税普通发票怎么开
  • 原始凭证按来源分为
  • sql server 3417错误
  • 删除重复记录mysql
  • mysql数据库主键怎么设置
  • Win8.1 VPN设置功能提示连接出错的简单解决方法
  • windows微软官方
  • centos6创建文件
  • solaris安装软件包
  • DxO Optics Pro 9 激活破解安装详细图文教程
  • 禁用windows installer没有用
  • win8系统怎么激活
  • win8粘贴板
  • ubuntu无线网卡驱动离线安装
  • 移动硬盘做win7系统盘
  • windows8.1安装windows7
  • linux 系统升级
  • windows10 2021预览版
  • node js教程
  • 噩梦原版
  • 简述javascript中的函数
  • jquery动态添加元素
  • javascript define的用法
  • jquery中on
  • 企业所得税计算器在线计算
  • 工业生产和农业生产区别
  • dhl清关需要提供资料嘛
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设