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 ...
随机推荐
- 博客Hexo + github pages + 阿里云绑定域名搭建个人博客
申请域名 万网购买的域名,地址:https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7 控制台进行解析 控制台 ...
- mongoose的save无效的问题
概述 今天朋友遇到了使用mongoose中的save无效的问题,我通过查找资料帮他解决了,把心得记录下来,供以后开发时参考,相信对其他人也有用. 参考资料: Mongoose学习参考文档--基础篇 M ...
- Kali学习笔记29:默认安装漏洞
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 默认安装漏洞: 早期Windows默认自动开启很多服务 ...
- PLSQL使用scott登录
Oracle有3种用户: system.sys.scott,其中system和sys的区别在与能否创建数据库,sys用户登录才可以创建数据库,而scott是给初学者学习的用户,学习者可以用Scott登 ...
- shell 中的单行注释和多行注释
1. 单行注释 众所周知,# 比如想要注释:echo “ni” # echo "ni" 2. 多行注释: 法一: : << ! 语句1 语句2 语句3 语句4 ! 例 ...
- java中Base64的加密工具封装
Base64加密作为最简单普遍的加密方式(其实只能称为编码方式),应用场景众多比如秘钥,安全证书,也应用在其他的加密方式中或与其他加密方式进行嵌套使用 可以通过引用sun.misc来使用,也可以自己手 ...
- Api 文档管理系统 RAP2 环境搭建
Api 文档管理系统 RAP2 环境搭建 发表于 2018-03-27 | 分类于 Api | 评论数: 4| 阅读次数: 4704 本文字数: 4.8k | 阅读时长 ≍ 9 分钟 RA ...
- ubuntu16.04 离线安装docker ce
ubuntu离线安装 docker17.05.0-ce 离线安装 不想自己下载的小伙伴可以从以下地址下载几个软件包: 链接: https://pan.baidu.com/s/1lF7t7ciMhUnW ...
- centos7通过yum安装nginx
centos7通过yum安装nginx nginx不支持centos7通过yum直接安装~~~ 1.查看操作系统位数[root@-jenkins ~]# rpm -aq|grep centos-rel ...
- DDD实战进阶第一波(十三):开发一般业务的大健康行业直销系统(订单上下文领域逻辑)
前一篇文章主要讲了订单上下文的POCO模型,其中订单与订单项中有大量的值对象.这篇文章主要讲讲这些值对象以及订单项.订单相关的领域逻辑. 1.ProductSKUs值对象领域逻辑:ProductSKU ...