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 相关文章推荐
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 Javascript
jQuery实现本地存储
Dec 22 jQuery
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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 常用类整理
2009/12/23 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
PHP 观察者模式的实现代码
2013/05/10 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
jquery获取css中的选择器(实例讲解)
2013/12/02 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
详解如何使用Python编写vim插件
2017/11/28 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
关于python 跨域处理方式详解
2020/03/28 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
管理学专业个人求职信范文
2013/09/21 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
房屋租房协议书范本
2014/12/04 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
杨善洲电影观后感
2015/06/04 职场文书
2015年教师节主持词
2015/07/03 职场文书