Как отфильтровать данные из списка элементов на основе введенного ввода независимо от регистра с использованием angular2 - PullRequest
Новая
       7

Как отфильтровать данные из списка элементов на основе введенного ввода независимо от регистра с использованием angular2

0 голосов
/ 02 мая 2018

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

Html: 

<mat-tab label="Active">
  <mat-icon for="search">search</mat-icon>
  <input type="search" [(ngModel)]="filter" name="search" class="search" placeholder="Company">
  <ul>
    <li *ngFor="let message of activeMessages| messagefilter: filter" (click)="showMessage(message)" [class.activeShow]="message.id == message_id">
      <span>{{message.messages[message.messages.length -1].updated_at | date:'dd.MM.yyyy'}}</span>
      <img style="width: 40px;" [src]="message.from_user_image || '../assets/images/msg.png'"/>
      <p style="padding-top: 16px;display: inline;">{{message.from_user_name}}</p>
      <p style="padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"><b>{{message.messages[message.messages.length -1].text}}</b></p>
    </li>
  </ul>
</mat-tab>

pipe.ts: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'messagefilter',
  pure: false
})

export class MessagePipe implements PipeTransform {
  transform(items, filter) {
    if (!items || !filter) {
      return items;
    }
    return items.filter((item) => this.applyFilter(item, filter));
  }
  /* Function to apply filter for Messages */
    applyFilter(user, filter): boolean { 
     console.log(user.from_user_name.indexOf(filter))
     console.log(filter) 
     console.log(user.from_user_name)
   if (user.from_user_name.indexOf(filter) > -1) { 
      return true; 
    } else{ 
      return false; 
   } 
  }
}

1 Ответ

0 голосов
/ 02 мая 2018

Вы можете использовать toLowerCase в фильтре для проверки.

Код user.from_user_name.indexOf(filter) > -1 не будет проверять чувствительность к регистру, поэтому вы должны изменить его на: user.from_user_name.toLowerCase().indexOf(filter.toLowerCase()) > -1

Ваша труба: 

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'messagefilter',
  pure: false
})

export class MessagePipe implements PipeTransform {
  transform(items, filter) {
    if (!items || !filter) {
      return items;
    }
    return items.filter((item) => this.applyFilter(item, filter));
  }
  /* Function to apply filter for Messages */
    applyFilter(user, filter): boolean { 
   if (user.from_user_name.toLowerCase().indexOf(filter.toLowerCase()) > -1) { 
      return true; 
    } else{ 
      return false; 
   } 
  }
}
...