Angular6 Filter实现页面搜索的示例代码


Posted in Javascript onDecember 02, 2018

前言

我们在开发过程中经常会遇到在页面上实现全局搜索的需求,例如:表格搜索,通过关键词检索整个表格,过滤出我们需要的数据。在Angular6 中我们可以通过Filter + Pipe 的方式来实现这个功能。下面我们看一下实现代码。

经人提醒,代码排版太乱。后续考虑将一个完整版的demo放到GitHub上,敬请期待。

实现代码

第一步

新建一个名为 filter.pipe.ts 的文件,这部分是实现的核心代码:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
 name: 'globalFilter'
})
export class GlobalFilterPipe implements PipeTransform {
 transform(items: any, filter: any, defaultFilter: boolean): any {
 if (!filter){
 return items;
 }

 if (!Array.isArray(items)){
 return items;
 }

 if (filter && Array.isArray(items)) {
 let filterKeys = Object.keys(filter);

 if (defaultFilter) {
 return items.filter(item =>
  filterKeys.reduce((x, keyName) =>
  (x && new RegExp(filter[keyName], 'gmi').test(item[keyName])) || filter[keyName] == "", true));
 }
 else {
 return items.filter(item => {
  return filterKeys.some((keyName) => {
  return new RegExp(filter[keyName], 'gmi').test(item[keyName]) || filter[keyName] == "";
  });
 });
 }
 }
 }
}

代码部分的正则表达式可以根据需要替换,这里是全局匹配。

第二步

在app.module.ts 文件中导入。

import { GlobalFilterPipe } from './shared/filter.pipe';

registerLocaleData(zh);

@NgModule({
 declarations: [
 GlobalFilterPipe,
 ]

第三步

在需要的html 文件中应用,在 componet 中定义一个搜索框的变量。

<nz-input-group nzSearch nzSize="large" [nzSuffix]="suffixButton">
 <input type="text" [(ngModel)]="searchText" nz-input placeholder="input search text">
</nz-input-group>
<ng-template #suffixButton>
 <button nz-button nzType="primary" nzSize="large" nzSearch>Search</button>
</ng-template>
<br>
<br>
<nz-card *ngFor="let topData of topCategoriesData" nzTitle="{{topData.categoryName}}">
 <div nz-card-grid [ngStyle]="gridStyle" *ngFor="let secondData of topData.subCategories | globalFilter: {categoryName: searchText,categoryCode: searchText}" >
 
 <nz-collapse>
 <nz-collapse-panel [nzHeader]="secondData.categoryName+'('+secondData.categoryCode+')'" [nzActive]="false" [nzDisabled]="false">
 <nz-select style="width: 100%;" (nzOpenChange)="loadMore(secondData.categoryId)" nzPlaceHolder="请选择..." nzAllowClear>
  <nz-option *ngFor="let thirdData of thirdCategoriesData | globalFilter: {categoryName: searchText,categoryCode: searchText}" [nzValue]="thirdData.categoryId" [nzLabel]="thirdData.categoryName+'('+thirdData.categoryCode+')'"></nz-option>
  <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
  <i nz-icon type="loading" class="loading-icon"></i> Loading Data...
  </nz-option>
 </nz-select>
 </nz-collapse-panel>
 </nz-collapse>
 <!-- <a>{{secondData.categoryName}}</a><b>({{secondData.categoryCode}})</b> -->
 </div>
 <ng-template #extraTemplate>
 <a>二级分类数量:{{data.subCategories.length}}</a>
 </ng-template>
</nz-card>
import { Component, OnInit } from '@angular/core';
import { CategoryService } from '../category.service';

@Component({
 selector: 'app-category',
 templateUrl: '../pages/category.component.html',
 styleUrls: ['../pages/category.component.css']
})
export class CategoryComponent implements OnInit {
 //todo 搜索无法由下至上匹配1,2级数据
 public searchText:string;

 topCategoriesData=[];
 
 thirdCategoriesData=[];

 isLoading = false;

 constructor(private categoryService:CategoryService) { }
 loadMore(id): void {
 this.isLoading = true;
 this.categoryService.getThirdById(id).subscribe((data:any) => {
 this.isLoading = false;
 this.thirdCategoriesData=data;
 });
 }

 ngOnInit():void {
 this.categoryService.getCategoriesTop().subscribe(
 (data:any)=>{
 this.topCategoriesData = data;
 });
 }

}

关键代码是:globalFilter: {categoryName: searchText,categoryCode: searchText}

其他代码都是为了完整而贴上去的。

结语

具体的实现思路是利用 filter + pipe 在数据集中进行过滤,因为这里直接过滤的是数据集。所以没办法单独设置过滤html,然后我遇到的问题是如果在一个包含有2级数据结构的html中应用的话,会从1级开始匹配,匹配到2级再结束。但如果1级未匹配到则2级不再匹配。例如:你的1级数据为:“医药品”,2级数据为“医药部外品”,“外用药品”。搜索词为:医药部,则不会显示任何结果。

最后,感谢阅读。本文如有不对的地方,还请指正。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
GOJS+VUE实现流程图效果
Dec 01 #Javascript
JavaScript实现简单轮播图效果
Dec 01 #Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
vue实现移动端悬浮窗效果
Dec 01 #Javascript
vue拖拽组件使用方法详解
Dec 01 #Javascript
vue实现div拖拽互换位置
Jul 29 #Javascript
You might like
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
详解ES6中的let命令
2020/04/05 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
2020/04/08 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
应届毕业生的自我鉴定
2013/11/13 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
市场推广策划方案
2014/06/02 职场文书
5s标语大全
2014/06/23 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
初中家长评语和期望
2014/12/26 职场文书
煤矿安全保证书
2015/02/27 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫