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 ...
随机推荐
- Go语言复制文件
需要使用io包的Copy方法 package main import ( "fmt" "io" "os" ) //自己编写一个函数,接收两个 ...
- 转载 Flask中客户端 - 服务器 - web应用程序 是如何处理request生成response的?
文章转载自https://blog.csdn.net/weixin_37923128/article/details/80992645 , 感谢原作者 当客户端向服务器发送一个请求时,服务器会将请求转 ...
- python(leetcode)-14最长公共前缀
编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow" ...
- 橙色优学:Java编程怎么提升技术,Java编程思维至关重要
橙色优学了解做为程序员,一旦进入技术行列,就开启了持续学习的道路,更迭迅速的互联网时代,技术自然也是一代一代的更新,在技术进阶的道路上,要不断吸收新的想法和技术知识. 牛逼的人总是让人羡慕,但如何才能 ...
- Xamarin.Android 嵌入web端界面
在程序中嵌入Web端界面. 首先在前台界面上创建一个webview <android.webkit.WebView android:layout_width="match_parent ...
- 实现quartz定时器及quartz定时器原理介绍
今天研究定时器,在网上看了一篇不错的文章,推荐给大家! 实现quartz定时器及quartz定时器原理介绍
- Struts标签<bean:write><logic:iterate></logic:equal>的组合使用小例
form表单中的一个下拉列表控件的代码如下 <select name="taskname" id="taskname" class="selec ...
- web进修之—Hibernate 懒加载(6)
关于懒加载 在关系数据库设计的时候,我们很多时候把表之间的关系设置为强关联(使用外键进行约束),在Hibernate中利用对象的包含关系进行维护(HIbernate本身就是面向对象的数据库操作模式), ...
- 【原创】USART异步模式配置
特性: (1)USART只能一位一位地发送和接受数据,在起始位期间,TX端处于低电平:当闲置时,TX端为高. (2)发送和接受由一共用的波特率发生器驱动,当发送器和接收器的使能位分别置位时,分 ...
- python学习笔记之自定义函数的导入
python可以将自己编写的类放在py文件中,然后由其他程序调用,今天分享下:如何在shell中从文件引用自定义类和函数,下面是具体的过程: 第一步将你编写的文件声明编码类型 然后将你编写的文件保存为 ...