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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
jquery键盘事件介绍
Jan 31 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
js的touch事件的实际引用
Oct 13 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
基于JavaScript获取url参数2种方法
Apr 17 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 HandlerSocket的使用
2011/05/02 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php7下的filesize函数
2019/09/30 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
围观tangram js库
2010/12/28 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
Python中的asyncio代码详解
2019/06/10 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
在python中使用nohup命令说明
2020/04/16 Python
python实现扫雷小游戏
2020/04/24 Python
Python中qutip用法示例详解
2020/10/02 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
铭立家具面试题
2012/12/06 面试题
什么是Remote Module
2016/06/10 面试题
我们的节日端午节活动方案
2014/03/02 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
工伤调解协议书
2016/03/21 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
MySQL创建表操作命令分享
2022/03/25 MySQL