搜索上陣角2

Question

我有搜索功能的動態導航條上的頂部過濾器上，

Component.html

<input type="text" class="form-control" placeholder="Navigation search..." [(ngModel)]="searchString"> 
<li class="nav-item " *ngFor="let dir of directories"> 
    <a href="javascript:;" class="nav-link nav-toggle"> 
     <i class="fa fa-clock-o"></i> 
     <span class="title">{{ dir.name }}</span> 
     <span class="arrow"></span> 
    </a> 
    <ul class="sub-menu" *ngFor="let file of dir.child"> 
     <li class="nav-item "> 
      <a href="#" class="nav-link "> 
       <span class="title">{{file.name}}</span> 
      </a> 
     </li> 
     <navigation-bar [directories]="dir.child"></navigation-bar> 
    </ul> 
</li> 

Component.ts

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'navigation-bar', 
    templateUrl: './app/home/navigationBar.component.html',  
}) 

export class NavigationBarComponent { 
    @Input() directories: Array<Tree>;  
} 

export class Tree{ 
    directories: any; 
    constructor() 
    { 
     this.directories = [ 
     { 
      name: 'parent1', 
      child: [{ 
       name: 'child1', 
       child: [] 
      }, 
      { 
       name: 'child2', 
       child: [] 
      }] 
     }, 
     { 
      name: 'parent2', 
      child: { 
       name: 'child1', 
       child: [] 
      } 
     }, 
     { 
      name: 'parent2', 
      child: [{ 
       name: 'child1', 
       child: [] 
      }, 
      { 
       name: 'child2', 
       child: [] 
      }] 
     }]; 
    }  
} 

現在我想使用文本框中輸入的搜索字符串搜索導航欄。

是否有任何方法來實現上述功能的每個字符輸入文本框中。它應該過濾JSON對象

Answer 1

的name屬性在您的輸入字段：

<input (keyup)="applyFilter($event.target.value);"> 

在您的組件：

applyFilter(filter: String) { 
    this.filteredArray = this.directories.filter(item => { 
      if (item.name.toString().toLowerCase().indexOf(filter.toLowerCase()) !== -1) { 
      return true; 
      } 
     return false; 
    } 
    ); 
} 

filteredArray是含有符合篩選條件的項目的陣列。

Answer 2

你可以創建一個自定義管道來做到這一點，好處是你可以通過那些需要搜索的關鍵字。您可以根據需要更新以下代碼。例如

<li *ngFor="let n of list | FilterPipe: queryString : searchableList "> 
     {{n.name}} ({{n.age}}) 
</li> 

this.searchableList = ['name','age'] 

管

@Pipe({ 
    name: 'FilterPipe', 
}) 
export class FilterPipe implements PipeTransform { 
    transform(value: any, input: string,searchableList : any) { 
     if (input) { 
      input = input.toLowerCase(); 
      return value.filter(function (el: any) { 
       var isTrue = false; 
       for(var k in searchableList){ 
        if(el[searchableList[k]].toLowerCase().indexOf(input) > -1){ 
        isTrue = true; 
        } 
        if(isTrue){ 
        return el 
        } 
       } 

      }) 
     } 
     return value; 
    } 
} 

More info