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 ...
随机推荐
- JavaScript 作用域、命名空间及闭包
变量作用域: 1.一个变量的作用域是程序源代码中定义这个变量的区域 2.在函数内声明的变量是局部变量,它只在该函数及其嵌套作用域里可见(js 函数可嵌套定义):不在任何函数内声明或在函数内不使用 va ...
- 人生苦短,我用Python(1)
一.人生苦短,我用Python 在文章的开头给大家介绍一下Python语言,作者Guido von Rossum.对,就是图中的“人生苦短我用Python”那哥们.你可能以为我会用很多文字介绍Pyth ...
- Git+Hexo搭建个人博客详细过程
通过Git+Hexo搭建的个人博客地址:https://liangh.top/ 1.安装Node.js.配置好Node.js环境.安装Git和配置好Git环境,打开cmd命令行,成功界面如下 2.安装 ...
- 课程五(Sequence Models),第二 周(Natural Language Processing & Word Embeddings) —— 1.Programming assignments:Operations on word vectors - Debiasing
Operations on word vectors Welcome to your first assignment of this week! Because word embeddings ar ...
- [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了
[译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 本文首发自:博客园 文章地址: https://www.cnblogs.com/yilezhu/p/ ...
- MySQL(3)---MySQL优化
MySQL优化 一.单表.双表.三表优化 1.单表 首先结论就是,range类型查询字段后面的索引全都无效 (1)建表 create table if not exists article( i ...
- 使用ANNdotNET进行情感分析
2018年10月的MSDN杂志上发表了由James McCaffrey撰写的文章“使用CNTK的情感分析” .在这篇博文中,我将向您介绍这篇非常好且写得很好的MSDN文章示例.我不打算重复MSDN文章 ...
- 整理一下pywinauto 的sendeys(py2.7)换成python3.6用PyUserInput
没办法入门学的是py3.6所以有些只支持2.7的库保好放弃了 senkeys (2.7)==>pyuserinput (3.6) ================================ ...
- MMORPG战斗系统随笔(一)、战斗系统流程简介
前言 转载请标明出处http://www.cnblogs.com/zblade/ 很久没有更新博客,中间迁移过一次博客,后来一直忙于项目的开发,忙的晚上回去没时间写博客,周日又要自我调整一下,所以空闲 ...
- casbin的分析
casbin的分析 问题 一般的项目中,都会有权限认证模块,用来控制不同的角色,可以访问的功能.比较出名的权限控制模型有ACL和RABC.如果每个项目中,都重新实现权限控制模块,这样操作会比较繁琐,希 ...