在Angular 7 CLI项目中如何制作实时搜索框 [英] How to make real time search box, in angular 7 cli project
本文介绍了在Angular 7 CLI项目中如何制作实时搜索框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在angular 7 cli项目中创建搜索框.我的项目后端是asp.net核心网络api.我将显示数据集数组,我想在有角度的前端应用程序中创建搜索框.如何做到这一点.
I want to make search box in angular 7 cli project. My project back-end was asp.net core web api. i will show array of data set, i want to make search box in angular front-end application. how to make that.
角度7 cli
[
{
"productId": 1,
"productName": "product 1",
"productPrice": 500,
"productDescription": "Des 1 enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.",
"productCategory": "cat 1",
"productAvailability": 0
},
{
"productId": 2,
"productName": "product 2",
"productPrice": 1000,
"productDescription": "Des 2 enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.",
"productCategory": "cat 2",
"productAvailability": 0
},
{
"productId": 3,
"productName": "product 3",
"productPrice": 2000,
"productDescription": "Des 3 enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.",
"productCategory": "cat 2",
"productAvailability": 0
},
{
"productId": 4,
"productName": "PRODUCT 4",
"productPrice": 3000,
"productDescription": "Des 4 enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.",
"productCategory": "cat 1",
"productAvailability": 0
}
]
当我在搜索输入框中输入字母或数字时,只会在前端显示与输入文本相关的数据.
when i enter letter or number in search input box, only that input text related data will show in front end.
推荐答案
通过使用角管提供按角度
HTML代码
<input type="text" class="form-control" [(ngModel)]="searchText" placeholder="Search item" name="search"
autocomplete="off">
<div *ngFor="let item of data| filterForUser : searchText; let i = index" >
<div> {{item.productId}}-{{item.productName}}</div>
</div>
过滤器组件
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterForUser'
})
export class FilterPipeForUserSearch implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items || !searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(it => {
return it.productId==searchText;
});
}
}
要使用所有字段进行过滤,请使用以下过滤器组件
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filterForUser'
})
export class FilterPipeForUserSearch implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items || !searchText) return items;
searchText = searchText.toLowerCase();
return items.filter((data) => this.matchValue(data,searchText));
}
matchValue(data, value) {
return Object.keys(data).map((key) => {
return new RegExp(value, 'gi').test(data[key]);
}).some(result => result);
}
}
显示结果,当用户仅在搜索框中键入任何内容
if (!items || !searchText) return [];
注意:请在应用程序/任何其他模块中声明FilterPipeForUserSearch
NOTE: Please declare FilterPipeForUserSearch
in app / any other Module
这篇关于在Angular 7 CLI项目中如何制作实时搜索框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文