如何在angular 7 cli项目中制作实时搜索框 [英] How to make real time search box, in angular 7 cli project

问题描述

我想在 angular 7 cli 项目中制作搜索框.我的项目后端是asp.net core web api.我将显示数据集数组，我想在角度前端应用程序中制作搜索框.如何做到这一点.

angular 7 cli

以下数据来自asp.net web api

<预><代码>[{产品编号":1，"productName": "产品 1",产品价格":500，"productDescription": "Des 1 enim ipsam voluptatem quia voluptas sat aspernatur aut odit aut fugit, sed quia consequuntur magni.","productCategory": "cat 1",产品可用性":0},{产品编号":2，"productName": "产品 2",产品价格":1000，"productDescription": "Des 2 enim ipsam voluptatem quia voluptas sat aspernatur aut odit aut fugit, sed quia consequuntur magni.","productCategory": "cat 2",产品可用性":0},{产品编号":3，"productName": "产品 3","productPrice": 2000,"productDescription": "Des 3 enim ipsam voluptatem quia voluptas sat aspernatur aut odit aut fugit, sed quia consequuntur magni.","productCategory": "cat 2",产品可用性":0},{"productId": 4,"productName": "产品 4","productPrice": 3000,"productDescription": "Des 4 enim ipsam voluptatem quia voluptas sat aspernatur aut odit aut fugit, sed quia consequuntur magni.","productCategory": "cat 1",产品可用性":0}]

当我在搜索输入框中输入字母或数字时，只有输入的文本相关数据才会显示在前端.

解决方案

BY USING Angular Pipe PROVIDED按角度

HTML 代码

<input type="text" class="form-control" [(ngModel)]="searchText" placeholder="Search item" name="search"自动完成=关闭"><div *ngFor="let 数据项| filterForUser : searchText; let i = index" ><div>{{item.productId}}-{{item.productName}}

过滤组件

import { Pipe, PipeTransform } from '@angular/core';@管道({名称:'filterForUser'})导出类 FilterPipeForUserSearch 实现 PipeTransform {变换(项目:任何[]，搜索文本:字符串):任何[] {if (!items || !searchText) 返回项目；searchText = searchText.toLowerCase();返回 items.filter(it => {返回 it.productId==searchText;});}}

使用以下过滤器组件过滤所有字段

import { Pipe, PipeTransform } from '@angular/core';@管道({名称:'filterForUser'})导出类 FilterPipeForUserSearch 实现 PipeTransform {变换(项目:任何[]，搜索文本:字符串):任何[] {if (!items || !searchText) 返回项目；searchText = searchText.toLowerCase();return items.filter((data) => this.matchValue(data,searchText));}匹配值(数据，值){返回 Object.keys(data).map((key) => {return new RegExp(value, 'gi').test(data[key]);}).some(result => result);}}

显示结果，当用户只在搜索框中输入任何内容时

 if (!items || !searchText) return [];

注意:请在应用程序/任何其他模块中声明FilterPipeForUserSearch

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.

angular 7 cli

Below array of data come from asp.net web api

[
  {
    "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.

解决方案

BY USING Angular Pipe PROVIDED BY ANGULAR

Html Code

<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>

Filter Component

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;
        });      
    }

}

To Filter with the all the fields Use following filter Component

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);
      }
}

to show results, when user will type anything in search box only

    if (!items || !searchText) return [];

NOTE: Please declare FilterPipeForUserSearch in app / any other Module

这篇关于如何在angular 7 cli项目中制作实时搜索框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！