vuejs自定义过滤器根据搜索框输入的值,筛选复杂的列表数据
如题所示,自定义过滤器根据搜索框输入的值,筛选复杂的列表数据。
如图所示:

html代码:
<input type="text" placeholder="姓名/账号/电话/公司名称" v-model="booksearchtext"/>
<div class="spec-same" v-for="one in booklist | conditions">
js自定义过滤器代码:
filters:{
conditions: function(items){
var searchRegex = new RegExp(this.booksearchtext, 'i');
var arr=[];
for(var i= 0, j = items.length; i < j; i++){
arr[i] = {};
arr[i].contacters = [];
for(var item = 0, len = items[i].contacters.length; item < len; item++){
if(searchRegex.test(items[i].contacters[item].name) || searchRegex.test(items[i].contacters[item].enterpriseName) || searchRegex.test(items[i].contacters[item].phoneNumber) || searchRegex.test(items[i].contacters[item].uniqueID)){
arr[i].firstLetter = items[i].firstLetter;
arr[i].contacters.push(items[i].contacters[item]);
}
}
}
return arr;
}
}
比如在输入框中输入'mm',得到筛选的结果如图所示:

vuejs自定义过滤器根据搜索框输入的值,筛选复杂的列表数据的更多相关文章
- VueJs 自定义过滤器使用总结
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...
- bootstrap-select搜索框输入中文
bootstrap-select 的搜索框无法输入中文,解决办法: 删除源码中这两行代码 that.$lis.not('.hidden, .divider, .dropdown-header').eq ...
- VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...
- jQuery搜索框输入实时进行查询
在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车. 实现方式为: $(".search").bind("input propertychan ...
- js搜索框输入提示(高效-ys8)
<style type="text/css"> .inputbox .seleDiv { border: 1px solid #CCCCCC; display: non ...
- selenium-百度搜索框输入后,定位联想下拉框元素
1.输入关键字后,显示联想下拉框,鼠标右键对应的联想字段,点击检查,就可在F12模式下元素查看器中定位到,之后使用Xpath定位.
- IOS搜索框输入中文解决方案(防抖)
class Header extends React.Component { constructor(props) { super(props); this.time = 0; // 重点在于这个th ...
- win10 搜索框输入没提示
1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可
- js获取文本框输入的值
<script type="text/javascript"> function getPosition(obj) { ; if (obj.selectionStart ...
随机推荐
- JDK 在 Linux 上安装的详细过程
1.下载JDK Linux上一般会安装Open JDK,如果有系统预装了OpenJDK的话需要先卸载掉OpenJDK, 卸载过程可以参考这里:https://www.cnblogs.com/sxdcg ...
- ruby-super用法
ruby语法-super用法 本文主要介绍ruby中super方法的使用.super方法参数传递.method执行顺序. 下面主要通过实例来说明super方法的使用: 示例1: #!/usr/bin/ ...
- Kali学习笔记31:目录遍历漏洞、文件包含漏洞
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 目录遍历漏洞: 应用程序如果有操作文件的功能,限制不严 ...
- java核心技术-(总结自杨晓峰-java核心技术36讲)
1. 谈谈你对java平台的理解 首先是java最显著的两个特性,一次写入处处运行:还有垃圾收集器gc,gc能够对java内存进行管理回收,程序员不需要关心内存的分配和回收问题 然后谈谈jre和jdk ...
- python中os.path.isdir()等函数的作用和用法
一 用法和概念: Python中的os模块用于和系统进行交互,其中: 1 os.listdir()用于返回一个由文件名和目录名组成的列表,需要注意的是它接收的参数需要是一个绝对的路径. 2 os.pa ...
- 性能瓶颈之Session
如果Source,Target和Mapping都不存在性能上的瓶颈,则问题可能会出在Session 以下问题可导致Session有性能上的瓶颈 1) 缓存小 2) 缓冲内存小 3) commit提交间 ...
- Quartz的使用案例
一.介绍 项目中的调度任务可以使用Quartz任务调度框架 1.Job接口:这个接口里面只定义了一个方法,excute void execute(JobExecutionContext context ...
- yum安装Elasticsearch5.x
这里演示YUM和RPM两种方式安装Elasticsearch 下载并安装 public signing key: rpm --import https://artifacts.elastic.co/G ...
- Android--UI之Button
前言 最近一直在讲androidUI控件的使用方式,这篇博客讲解一下基本上属于用处最广泛的控件之一的Button控件.如果有过其他平台开发经验的程序员,对按钮是不会陌生的.本篇博客首先讲解一下Andr ...
- Mybatis数据源
在描述mybatis数据源之前,先抛出几个问题,这几个问题都能在本文得到解答 1.mybatis是如何获取到mysql连接的? 2.mybatis的Connection是怎么被创建的? 1.Datas ...