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

  • iphone13pro有3dtouch吗(iphone13pro有3dtouch功能吗)

    iphone13pro有3dtouch吗(iphone13pro有3dtouch功能吗)

  • vivox50有红外线功能吗(vivox50有红外线发射功能吗)

    vivox50有红外线功能吗(vivox50有红外线发射功能吗)

  • jbl蓝牙耳机左耳没声音了(jbl蓝牙耳机左耳断连)

    jbl蓝牙耳机左耳没声音了(jbl蓝牙耳机左耳断连)

  • honor7x怎么隐藏软件(honor7怎么隐藏软件)

    honor7x怎么隐藏软件(honor7怎么隐藏软件)

  • 怎么看微信被别人删了没有(怎么看微信被别人拉黑名单)

    怎么看微信被别人删了没有(怎么看微信被别人拉黑名单)

  • 拼多多罚款规则有哪些(拼多多罚款规则2022)

    拼多多罚款规则有哪些(拼多多罚款规则2022)

  • 腾讯大王卡看快手免流量吗(腾讯大王卡看快手放映厅免流量吗)

    腾讯大王卡看快手免流量吗(腾讯大王卡看快手放映厅免流量吗)

  • 操作系统是管理和控制计算机系统中的什么(操作系统属于什么管理)

    操作系统是管理和控制计算机系统中的什么(操作系统属于什么管理)

  • 淘宝退货理由对卖家的影响(淘宝退货理由对买家有影响吗)

    淘宝退货理由对卖家的影响(淘宝退货理由对买家有影响吗)

  • 拼多多新店铺可以开直播吗(拼多多新店铺可以开直通车吗)

    拼多多新店铺可以开直播吗(拼多多新店铺可以开直通车吗)

  • 荣耀20pro安兔兔跑分(荣耀20安兔兔跑)

    荣耀20pro安兔兔跑分(荣耀20安兔兔跑)

  • 安卓手机有测距仪吗(安卓手机测距仪软件哪个好用)

    安卓手机有测距仪吗(安卓手机测距仪软件哪个好用)

  • 计算机网络协议包括哪几个方面(计算机网络协议是为保证准确)

    计算机网络协议包括哪几个方面(计算机网络协议是为保证准确)

  • 苹果电池84容量需要换吗(iphone电池84)

    苹果电池84容量需要换吗(iphone电池84)

  • oppok5视频没有美颜吗(oppo手机视频没有美颜怎么办)

    oppok5视频没有美颜吗(oppo手机视频没有美颜怎么办)

  • word2019怎么删除分页符(word2019怎么删除图片背景)

    word2019怎么删除分页符(word2019怎么删除图片背景)

  • 抖音号一天可以关注多少人(抖音号一天可以私信多少人)

    抖音号一天可以关注多少人(抖音号一天可以私信多少人)

  • 淘宝和闲鱼可以同步吗(淘宝和闲鱼可以共用一个链接吗)

    淘宝和闲鱼可以同步吗(淘宝和闲鱼可以共用一个链接吗)

  • 快手直播观看人数在哪(快手直播观看人数10w+是多少人)

    快手直播观看人数在哪(快手直播观看人数10w+是多少人)

  • 华为荣耀20时间设置在哪(华为荣耀20时间和日期在哪里)

    华为荣耀20时间设置在哪(华为荣耀20时间和日期在哪里)

  • z97主板最高配什么cpu(z97最好主板)

    z97主板最高配什么cpu(z97最好主板)

  • 三星note10没有耳机孔怎么听歌(三星note10耳机插上去没反应)

    三星note10没有耳机孔怎么听歌(三星note10耳机插上去没反应)

  • 抖音国外版本叫什么(抖音的国外版本)

    抖音国外版本叫什么(抖音的国外版本)

  • 优酷app扫码登录在哪(优酷扫码登录在哪,手机二维码在哪)

    优酷app扫码登录在哪(优酷扫码登录在哪,手机二维码在哪)

  • 苹果ios12迅雷怎么信任验证(ios迅雷)

    苹果ios12迅雷怎么信任验证(ios迅雷)

  • 当当网如何退货(当当网如何退货免运费)

    当当网如何退货(当当网如何退货免运费)

  • 正常运行windows所需的文件(正常运行英文)

    正常运行windows所需的文件(正常运行英文)

  • vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话(vue 模拟遥控按钮)

    vue 模拟 chatgpt 聊天效果:js 实现逐字显示、延时函数模拟对话(vue 模拟遥控按钮)

  • 房屋出租何时缴税
  • 私车公用是否合法
  • 专利年费是不是只能一项一项交
  • 微信支付宝收入计入科目
  • 汇算清缴退回的所得税
  • 退税抵税申请表
  • 滴滴出行开具的运输服务电子普通发票
  • 轿车被盗
  • 已入账未抵扣退回发票
  • 农产品为什么价格低
  • 其他应收款是否要收利息
  • 投资活动购建固定资产
  • 免税企业以前年收入多少
  • 企业交的社保是什么
  • 污泥处置中心所得税优惠政策
  • 电子发票没有纳税人识别号有效吗
  • 发票从7月1日起开
  • 挂靠经营的纳税人
  • 解析居民企业非货币性资产对外投资政策
  • 2020年开公司优惠政策
  • 企业发生的哪些业务可以使用简易计税法
  • 什么是短期借款利率
  • 购房发票拿到了接着干什么
  • vmware10虚拟机安装
  • 2021年8月现在还能去武汉吗
  • 如何部署迫击炮
  • w7系统怎么用
  • 税务实名认证是不是就是税务登记
  • 民办非企业的财务会计制度是什么
  • 企业发行股票的溢价收入应计入
  • cda是什么文件格式
  • PHP:iconv_substr()的用法_iconv函数
  • 收取逾期包装物押金怎么算税
  • php编程计算日期怎么算
  • php如何上传1个g以上的文件
  • php 替换
  • php zmq
  • 个税申报结果查询
  • 固定资产内部转移单
  • 个人电子发票怎么查询
  • 红字发票开错可以重开吗
  • sqlserver2008数据库定时备份
  • windows 和 linux
  • php 操作mongodb
  • 企业合并属于非企业吗
  • 固定资产改扩建和大修理的区别
  • 企业捐赠自产产品的所得税处理
  • 公司购买新车怎么入账
  • sqlserver数据库中进行查询所使用的语言为
  • 咨询服务业主营业务成本
  • 付承包费计入什么科目
  • 现金解款单是什么
  • 行政事业单位核销固定资产的账务处理
  • 工业企业新产品收入的调研报告
  • 商业承兑汇票的风险
  • 待抵扣进项税额分录
  • 产品不符合要求
  • 酒店酒水成本核算表
  • 进项税有什么相关要求
  • 会计审核程序
  • 企业成立第二年有补贴吗
  • VirtualBox安装64位系统报错的处理方法
  • windows8联网
  • xp系统不能正常启动怎么修复
  • edge以ie
  • win 7电脑音箱没有声音
  • linux的web服务器
  • win7电脑开机蓝屏无法进入系统怎么办
  • linux一共多少命令
  • qt creator kit
  • 分区工具怎么取消主分区
  • javascript中的this属性
  • shell脚本 -ne 0
  • python fabric实现远程部署
  • javascript数组去重函数
  • JavaScript的函数定义
  • 江苏电子税务局官网登录入口
  • 安徽省电子税务局怎么下载
  • 四川地方税务 副局长 晓宏
  • 广东增值税发票勾选平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设