Как сделать окно поиска в реальном времени, в проекте angular 7 cli

Question

Я хочу сделать поисковое окно в угловом 7 проекте.Моим бэк-эндом проекта был основной веб-интерфейс asp.net.Я покажу массив данных, я хочу сделать окно поиска в угловом приложении.как это сделать.

угловой 7 cli

Ниже массива данных поступает с веб-интерфейса asp.net

[
  {
    "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
    } 
   ]

, когда я вводю букву или цифру в поле ввода поиска, только этот текстсвязанные данные будут отображаться в начале.

Answer 1

ИСПОЛЬЗУЯ Угловая труба ПРЕДОСТАВЛЯЕТСЯ УГЛОВОЙ

Код 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 в приложении / любом другом модуле

Answer 2

Надеюсь, я еще не слишком поздно, но у меня есть альтернативный метод, кроме использования Pipes.По сути, этот подход требует, чтобы вы получили ключи / свойства для объекта, а затем мы перебираем массив для поиска термина в каждом свойстве.

const data = [{
    "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
  }
];

function search(searchTerm) {
  const val = searchTerm.toLowerCase();
  const keys = Object.keys(data[0]);
  //console.log(keys)
  const searchResults = data.filter(item => {
    // iterate through each row's data by the properties
    for (let i = 0; i < keys.length; i++) {
      if (item[keys[i]].toString().toLowerCase().indexOf(val) !== -1 || !val) {
        return true;
      }
    }
  });
  console.log(searchResults);
  return searchResults;
}
search('Des 2 enim ipsam');

Answer 3

Оке, давайте попробуем объяснить.Итак, у вас есть ваши сохраненные данные, которые вы показываете выше.

Вы хотите повторить фильтрацию этих данных.

Итак, прежде всего вы делаете их копию при сборе данных.

Что-то вроде

this.historyData = data;

Затем при поиске вы делаете:

this.data = this.historyData;

Теперь эта часть выполнена,Теперь вы хотите фильтровать, поэтому вы делаете:

let searchedData = [];
for(let i = 0; i < this.data.length; i++) {
  let boolean = false;
  Object.getOwnPropertyNames(this.data[i]).map((key: string) = {
    if(this.data[i][key] === value) { boolean = true; }
  })
  if(boolean) { searchedData.push(this.data[i]); }
}
this.data = searchedData;

И когда ваше значение пусто, вы можете сделать.

if(value === '') { this.data = this.historyData; }
else { //the above