Angular 2 - 使用管道搜索不区分大小写
Angular 2 - Case insenstive search using pipe
我的项目中有一个有效的搜索管道。它应用于 table。 table 有很多列,例如产品名称、类别、数量等。管道搜索所有字段并过滤结果。它区分大小写,我想让它不区分大小写。
如果我键入 Mobile
它会显示结果,但如果我键入 mobile
它不会显示结果。
Search.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import {isObject} from "rxjs/util/isObject";
import {isEmpty} from "rxjs/operator/isEmpty";
import {empty} from "rxjs/Observer";
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform
{
transform(input, searchString)
{
if (input == null) return input;
return input.filter(this.compareWithAllFields, searchString);
}
compareWithAllFields(value, index)
{
var fields = Object.keys(value);
for (let i = 0; i < fields.length; i++)
{
if (value[fields[i]] != null)
{
if (isObject(value[fields[i]]))
{
var childFields = Object.keys(value[fields[i]]);
if (childFields.length > 0)
{
for (let j = 0; j < childFields.length; j++)
{
if ((value[fields[i]][childFields[j]] + "").indexOf(this.toString()) !== -1)
{
return true;
}
}
}
}
if ((value[fields[i]] + "").indexOf(this.toString()) !== -1)
{
return true;
}
}
}
return false;
}
}
输入表格
<input placeholder="Enter Product Details to Search" class="form-control input-lg" type="text" #searchProduct
(keyup)="0">
用法
<tr *ngFor="let product of products | search:searchProduct.value;let serial = index">
String.prototype.toLowerCase()
获胜:
compareWithAllFields(value, index)
{
var fields = Object.keys(value);
for (let i = 0; i < fields.length; i++)
{
if (value[fields[i]] != null)
{
if (isObject(value[fields[i]]))
{
var childFields = Object.keys(value[fields[i]]);
if (childFields.length > 0)
{
for (let j = 0; j < childFields.length; j++)
{
if ((value[fields[i]][childFields[j]] + "").toLowerCase().indexOf(this.toString().toLowerCase()) !== -1)
{
return true;
}
}
}
}
if ((value[fields[i]] + "").toLowerCase().indexOf(this.toString().toLowerCase()) !== -1)
{
return true;
}
}
}
return false;
}
参考:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase
我的项目中有一个有效的搜索管道。它应用于 table。 table 有很多列,例如产品名称、类别、数量等。管道搜索所有字段并过滤结果。它区分大小写,我想让它不区分大小写。
如果我键入 Mobile
它会显示结果,但如果我键入 mobile
它不会显示结果。
Search.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import {isObject} from "rxjs/util/isObject";
import {isEmpty} from "rxjs/operator/isEmpty";
import {empty} from "rxjs/Observer";
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform
{
transform(input, searchString)
{
if (input == null) return input;
return input.filter(this.compareWithAllFields, searchString);
}
compareWithAllFields(value, index)
{
var fields = Object.keys(value);
for (let i = 0; i < fields.length; i++)
{
if (value[fields[i]] != null)
{
if (isObject(value[fields[i]]))
{
var childFields = Object.keys(value[fields[i]]);
if (childFields.length > 0)
{
for (let j = 0; j < childFields.length; j++)
{
if ((value[fields[i]][childFields[j]] + "").indexOf(this.toString()) !== -1)
{
return true;
}
}
}
}
if ((value[fields[i]] + "").indexOf(this.toString()) !== -1)
{
return true;
}
}
}
return false;
}
}
输入表格
<input placeholder="Enter Product Details to Search" class="form-control input-lg" type="text" #searchProduct
(keyup)="0">
用法
<tr *ngFor="let product of products | search:searchProduct.value;let serial = index">
String.prototype.toLowerCase()
获胜:
compareWithAllFields(value, index)
{
var fields = Object.keys(value);
for (let i = 0; i < fields.length; i++)
{
if (value[fields[i]] != null)
{
if (isObject(value[fields[i]]))
{
var childFields = Object.keys(value[fields[i]]);
if (childFields.length > 0)
{
for (let j = 0; j < childFields.length; j++)
{
if ((value[fields[i]][childFields[j]] + "").toLowerCase().indexOf(this.toString().toLowerCase()) !== -1)
{
return true;
}
}
}
}
if ((value[fields[i]] + "").toLowerCase().indexOf(this.toString().toLowerCase()) !== -1)
{
return true;
}
}
}
return false;
}
参考: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase