vue实现Input输入框模糊查询方法


Posted in Javascript onJanuary 29, 2021

本文实例为大家分享了vue实现Input输入框模糊查询方法的具体代码,供大家参考,具体内容如下

原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

下面先看示例:

搜索前:

vue实现Input输入框模糊查询方法

搜索后:

vue实现Input输入框模糊查询方法

实现方法:

methods:{
 // 点击搜索工程
 search(){
 // 支持模糊查询
 // this.xmgcqkJsonsData:用于搜索的总数据
   // toLowerCase():用于把字符串转为小写,让模糊查询更加清晰
 let _search = this.jobNo.toLowerCase();
 let newListData = []; // 用于存放搜索出来数据的新数组
 if (_search) {
 this.xmgcqkJsonsData.filter(item => {
  if (item.code.toLowerCase().indexOf(_search) !== -1) {
  newListData.push(item);
  }
 }) 
 }
 this.xmgcqkJsonsData = newListData;
 // console.log(‘新数组',newListData)
 }, 
}

以上方法是根据 工单号/流水号 进行查询的,如果在当前基础上增加对其它条件的搜索,比如 项目/工程名称,那只需要在原来的代码上增加一个判断条件即可,如:

if (item.code.toLowerCase().indexOf(_search) !== -1 || item.name.toLowerCase().indexOf(_search) !== -1) {
 newListData.push(item);
 }

这就是如何实现vue input输入框模糊查询的方法。

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery select操作的日期联动实现代码
Dec 06 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
JavaScript工具库MyTools详解
Jan 01 Javascript
js实现简单的打印表格
Jan 15 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 #Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 #Javascript
vue.js实现左边导航切换右边内容
Oct 21 #Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 #Javascript
JavaScript函数IIFE使用详解
Oct 21 #Javascript
vue实现侧边栏导航效果
Oct 21 #Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 #Javascript
You might like
php生成随机数的三种方法
2014/09/10 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
2014/03/03 Javascript
Javascript字符串浏览器兼容问题分析
2014/12/01 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python实现优先级队列结构的方法详解
2016/06/02 Python
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
使用HTML5做的导航条详细步骤
2020/10/19 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
中专毕业生自荐信
2013/11/16 职场文书
2014年征兵标语
2014/06/20 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
小学毕业感言100字
2015/07/30 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
晶体管来复再生式二管收音机
2021/04/22 无线电