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

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. silverlight属性改变事件通知

    工作中遇到silverlight本身没有提供的某些属性改变事件,但又需要在属性改变时得到通知,Google搬运stack overflow,原地址 /// Listen for change of t ...

  2. alibaba的FastJson找不到JSON对象问题

    在现在出现使用JSON.toJsonString()方法时,可能没有JSON这个对象. 这种问题可能是下载的jar版本比较高.在低版本的jar使用的是JSON对象. 我使用的是1.2.47版本的jar ...

  3. Postgresql-模糊匹配大杀器

    # Postgresql-模糊匹配大杀器 ## 问题背景 随着pg越来越强大,abase目前已经升级到5.0(postgresql10.4),目前abase5.0继承了全文检索插件(zhparser) ...

  4. 【Hadoop】2、Hadoop高可用集群部署

    1.服务器设置 集群规划 Namenode-Hadoop管理节点 10.25.24.92 10.25.24.93 Datanode-Hadoop数据存储节点 10.25.24.89 10.25.24. ...

  5. mysql 架构篇系列 1 复制原理和复制架构

    一. 复制概述 mysql 从3.23版本开始提供复制功能,复制是指将主数据库的ddl和dml操作通过二进制日志传到复制服务器(也叫从服务器)上,然后在从服务器上对这些日志重新执行(也叫重做),从而使 ...

  6. sql server 索引阐述系列三 表的堆组织

    一.   概述 这一节来详细介绍堆组织,通过讲解堆的结构,堆与非聚集索引的关系,堆的应用场景,堆与聚集索引的存储空间占用,堆的页拆分现象,最后堆的使用建议 ,这几个维度来描述堆组织.在sqlserve ...

  7. DWR第四篇之对象传参

    1. 本示例在第一篇架构基础上添加代码 2. 首先,在dwr.xml文件里添加对象转换器 3. 编写Person实体类 package com.skyer.vo; import java.util.A ...

  8. kubernetes的安装

    获取源码 最新安装包下载地址,GitHub下载地址 本次实验的1.10.0的二进制包下载,百度网盘 机器环境 Kubernetes Roles IP地址 Hostname Master 192.168 ...

  9. 第1章 Linux文件类基础命令

    1. 关于路径和通配符 Linux中分绝对路径和相对路径,绝对路径一定是从/开始写的,相对路径不从根开始写,还可能使用路径符号. 路径展开符号: . :(一个点)表示当前目录 .. :(两个点)表示上 ...

  10. shell高效处理文本(1):xargs并行处理

    xargs具有并行处理的能力,在处理大文件时,如果应用得当,将大幅提升效率. xargs详细内容(全网最详细):https://www.cnblogs.com/f-ck-need-u/p/592592 ...