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

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自定义过滤器根据搜索框输入的值,筛选复杂的列表数据的更多相关文章

  1. VueJs 自定义过滤器使用总结

    过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使 ...

  2. bootstrap-select搜索框输入中文

    bootstrap-select 的搜索框无法输入中文,解决办法: 删除源码中这两行代码 that.$lis.not('.hidden, .divider, .dropdown-header').eq ...

  3. VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})

    Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化. 语法 <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bin ...

  4. jQuery搜索框输入实时进行查询

    在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车. 实现方式为: $(".search").bind("input propertychan ...

  5. js搜索框输入提示(高效-ys8)

    <style type="text/css"> .inputbox .seleDiv { border: 1px solid #CCCCCC; display: non ...

  6. selenium-百度搜索框输入后,定位联想下拉框元素

    1.输入关键字后,显示联想下拉框,鼠标右键对应的联想字段,点击检查,就可在F12模式下元素查看器中定位到,之后使用Xpath定位.

  7. IOS搜索框输入中文解决方案(防抖)

    class Header extends React.Component { constructor(props) { super(props); this.time = 0; // 重点在于这个th ...

  8. win10 搜索框输入没提示

    1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可

  9. js获取文本框输入的值

    <script type="text/javascript"> function getPosition(obj) { ; if (obj.selectionStart ...

随机推荐

  1. springboot2.0jar包启动异常

    今天碰到一个异常: 08:44:07.214 [main] ERROR org.springframework.boot.SpringApplication - Application run fai ...

  2. Ubuntu 16.04下GDB调试

    在linux中还有一个更受大家欢迎的调试工具:GDB.GDB是一个由GNU开源组织发布的.UNIX/LINUX操作系统下的.基于命令行的.功能强大的程序调试工具.可以用来调试C,C++程序. GDB功 ...

  3. android发布新版忘记keystore(jks)密码终极解决方案

    android app签名是使用的keystore文件/jks文件,如果是eclipse是keystore,android studio则是jks,如果忘记了的话很悲催: 1.找到密码 2.改应用的包 ...

  4. 序列化与反序列化之JSON

    在不同编程语言之间传递对象,须把对象序列化为标准格式,比如XML 但更好的方法是序列化为JSON,因为JSON表示出来就是一个字符串,可被所有语言读取,也可方便地存储到磁盘或者通过网络传输 JSON不 ...

  5. HTML一些有趣的东西

    1.<head>标签里: <meta http-equiv="Refresh" content="3"/><!--三秒自动刷新-- ...

  6. Ocelot简易教程(二)之快速开始1

    Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocelot简易教程(二)之快速开始1 Ocelot简易教程(二)之快速开始2 Ocelot简易教程(三)之主要特性及路由详解 ...

  7. Gradle实现自动打包,签名,自定义apk文件名

    Gradle实现自动打包,签名,自定义apk文件名 什么是签名,签名有什么用 Android APP都需要我们用一个证书对应用进行数字签名,不然的话是无法安装到Android手机上的,平时我们调试运行 ...

  8. leetcode — rotate-list

    /** * Source : https://oj.leetcode.com/problems/rotate-list/ * * * Given a list, rotate the list to ...

  9. vue中使用refs定位dom出现undefined?

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对 ...

  10. Asp.Net项目的部署到Linux中(Linux + Jexus+Nginx )

    因为老项目用的Asp.Net Web API技术开发部署到Window系统上,而新项目用的是.Net Core部署到Ubuntu系统中,所以在管理切换上有些不便.于是决定将老项目的测试服部署到Ubun ...