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

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. 使用MagicOnion实现gRPC

    1.什么是gRPC 官方文档:https://grpc.io/docs/guides/index.html 2.什么是MagicOnion MagicOnion开源地址:https://github. ...

  2. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

  3. Mybatis框架七:三种方式整合Spring

    需要的jar包: 新建lib文件夹放入jar包,Build Path-->Add To Build Path之后: 原始Dao开发示例: src下:新建核心配置文件sqlMapConfig.xm ...

  4. Error running 'Unnamed': Address localhost:1099 is already in use

    当使用idea运行项目时,出现‘Error running 'Unnamed': Address localhost:1099 is already in use’. 解决方案: 1.打开任务管理器 ...

  5. 卷积神经网络CNN的原理(三)---代码解析

    卷积神经网络在几个主流的神经网络开源架构上面都有实现,我这里不是想实现一个自己的架构,主要是通过分析一个最简单的卷积神经网络实现代码,来达到进一步的加深理解卷积神经网络的目的. 笔者在github上找 ...

  6. tensorflow 1.0 学习:参数初始化(initializer)

    CNN中最重要的就是参数了,包括W,b. 我们训练CNN的最终目的就是得到最好的参数,使得目标函数取得最小值.参数的初始化也同样重要,因此微调受到很多人的重视,那么tf提供了哪些初始化参数的方法呢,我 ...

  7. SkyWalking-netcore

    详细安装步骤:https://www.jianshu.com/p/3ddd986c7581?from=groupmessage SkyWalking-netcore 官网:https://github ...

  8. Talk In Web Security(安全世界观): Devleping a Secure WebSite

    Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket Reprint it anywhere u want. Why to write about Web ...

  9. 知其然而所以然:Operating System 概述和学习图

    大神绕道,鄙人初入 OS . 一.想知OS,先知计算机系统概述 #图解 #基本指令和中断周期 #直接内存存取(Direct Memory Access,DMA) I/O模块对存储器发出读命令或者写命令 ...

  10. 如何在优雅地Spring 中实现消息的发送和消费

    本文将对rocktmq-spring-boot的设计实现做一个简单的介绍,读者可以通过本文了解将RocketMQ Client端集成为spring-boot-starter框架的开发细节,然后通过一个 ...