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

  • qq怎么把头像变成正方形(QQ怎么把头像变灰)

    qq怎么把头像变成正方形(QQ怎么把头像变灰)

  • 快手音量小怎么回事(快手音量小怎么设置)

    快手音量小怎么回事(快手音量小怎么设置)

  • 蚂蚁森林保护地能干嘛(蚂蚁森林保护地巡护答案大全)

    蚂蚁森林保护地能干嘛(蚂蚁森林保护地巡护答案大全)

  • 华为电脑管家打不开怎么办(华为电脑管家打不开任务图标)

    华为电脑管家打不开怎么办(华为电脑管家打不开任务图标)

  • 为什么每页页码都一样(为什么每一页页码都是1)

    为什么每页页码都一样(为什么每一页页码都是1)

  • 二维码有效期多久(二维码有使用期限吗)

    二维码有效期多久(二维码有使用期限吗)

  • 1673是iPad几(ipad型号1673)

    1673是iPad几(ipad型号1673)

  • 为什么视频不能横屏看(为什么视频不能保存到相册)

    为什么视频不能横屏看(为什么视频不能保存到相册)

  • 苹果手机gsm和global是什么意思(iphone gsm)

    苹果手机gsm和global是什么意思(iphone gsm)

  • 手机重影是内屏坏了吗(手机重影内屏导致无法关机怎么办)

    手机重影是内屏坏了吗(手机重影内屏导致无法关机怎么办)

  • 抖音如何删除配乐(抖音如何删除配语音的文字)

    抖音如何删除配乐(抖音如何删除配语音的文字)

  • dvd-rw属于什么(dvd rw什么意思)

    dvd-rw属于什么(dvd rw什么意思)

  • 平板白苹果了怎么恢复(平板白苹果怎么进入恢复模式)

    平板白苹果了怎么恢复(平板白苹果怎么进入恢复模式)

  • 快手注销第三条不通过怎么办(快手注销第三个条件)

    快手注销第三条不通过怎么办(快手注销第三个条件)

  • 第二代计算机所采用的主要逻辑元件是(第二代计算机所用电子元器件是)

    第二代计算机所采用的主要逻辑元件是(第二代计算机所用电子元器件是)

  • 计算机时代是从什么时候开始的(计算机是什么时代的产物)

    计算机时代是从什么时候开始的(计算机是什么时代的产物)

  • 苹果max灵敏度设置(xsm灵敏度)

    苹果max灵敏度设置(xsm灵敏度)

  • 爱奇艺是百度的吗(爱奇艺app官方版下载)

    爱奇艺是百度的吗(爱奇艺app官方版下载)

  • 华为m6能插u盘嘛(华为m6能插u盘嘛怎么用)

    华为m6能插u盘嘛(华为m6能插u盘嘛怎么用)

  • 小米主界面搜索栏怎么关闭(小米手机主页搜索)

    小米主界面搜索栏怎么关闭(小米手机主页搜索)

  • 照片无备份删了咋找回(照片无备份删了咋找回免费)

    照片无备份删了咋找回(照片无备份删了咋找回免费)

  • 华为freebud使用方法(华为freebud使用说明书)

    华为freebud使用方法(华为freebud使用说明书)

  • 小米ai音箱需要关闭吗(小米ai音箱必须要连wifi吗)

    小米ai音箱需要关闭吗(小米ai音箱必须要连wifi吗)

  • vep格式用什么播放器(vep格式用什么播放器平板)

    vep格式用什么播放器(vep格式用什么播放器平板)

  • cad清理图层命令(cad中清理图层快捷键)

    cad清理图层命令(cad中清理图层快捷键)

  • 新版Edge浏览器开启“增强文字对比度”功能(新版edge浏览器兼容ie)

    新版Edge浏览器开启“增强文字对比度”功能(新版edge浏览器兼容ie)

  • 营改增抵减的销项税额会计分录
  • 技术支持费用取费依据
  • 企业转让固定资产要交什么税
  • 银行对公回单可以在家打印吗
  • 本年利润每个月都转吗
  • 核定征收企业股权转让的税收
  • 证券公司清算交收
  • 进口关税税率和增值税
  • 子公司向母公司借款
  • 没有收入是否可以入党
  • 环保税和环境税一样吗
  • 利息保障倍数为负数说明什么
  • 计提工资多计提,如何做冲销
  • 分期收款什么是分期还款
  • 金税三期啥意思
  • win11系统更新卡在25%
  • .exe文件病毒
  • 如何关闭windowsdefender防病毒
  • 应收账款的内容包括
  • 光纤布线有什么作用
  • 服务业公司取得的成果
  • 最小的洗衣机是多少
  • 无法偿还的应付账款计入什么科目
  • python创建自定义函数
  • sudo命令功能
  • php无限级分销
  • 注册公司填写从业人数多少合适
  • 什么是现金流量净额
  • 长期待摊费用是什么科目
  • 以前年度损益调整借贷方向
  • 可供出售金融资产新准则叫什么
  • 公司员工抽奖活动
  • 固定资产多少可以一次摊销
  • 来料加工企业的税率是多少
  • 公司缴纳社保应该怎么做账
  • 如何禁用笔记本键盘触摸板
  • 完税证明可以作废吗
  • js执行上下文的概念
  • 织梦建站详细步骤
  • php.ini上传限制
  • 预算收入支出
  • sql 文件存储
  • 个人所得税的计算标准
  • 企业收到投资者投入资金
  • 以公允价值计量计入其他综合收益
  • 车船税每年都是一样的吗
  • 积分兑换商品怎么查快递
  • 政府补助怎么记账
  • 无形资产当年提摊销嘛
  • 社平工资调整补差能补多少
  • 发票怎么跨月作废申请
  • 免税发票怎么抵扣
  • 计时工资和计件工资的含义
  • 待认证进项税额和待抵扣进项税额的区别
  • 电子发票开具流程?
  • 固定资产改变用途折旧处理
  • sql server启动不了 错误2
  • windows mysql1045
  • mssql insert into 和insert into select性能比较
  • mysql8.0创建函数
  • 苹果电脑mac如何连接打印机
  • 如何将windows文件复制到ubuntu
  • 激活窗口的菜单的快捷键
  • 怎么知道游戏是什么引擎
  • 无法收到steam短信代码
  • centos7手册
  • win8/10功能
  • ghost操作指南
  • linux扩大文件系统
  • win7系统谷歌浏览器错误代码a00a0017
  • xtemplate node.js 的使用方法实例解析
  • jquery 表格 排序
  • express app.js
  • shell脚本数组的用法
  • dos 改名
  • javascript 默认参数
  • 广东省电子税务局app下载官网
  • 税务异地协查系统管理办法
  • 日照公交305发车时间表
  • 企业改制和重组的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设