Как сделать так, чтобы в моем «угловом поисковом списке» не учитывался регистр? - PullRequest
Новая
       40

Как сделать так, чтобы в моем «угловом поисковом списке» не учитывался регистр?

1 голос
/ 25 мая 2019

У меня есть список вакансий и окно поиска.В поле поиска пользователь вводит название работы для поиска работы.Я сделал угловую трубу для поиска работы на основе набранного алфавита пользователем в окне поиска. Это означает, что список заданий обновляется, имея только тот элемент, который набрал алфавит пользователя. Он работает отлично, но с учетом регистра, я хочучтобы сделать его чувствительным к регистру.Я уже сделал чувствительный к регистру угловой канал на основе «Содержит». Я пытался сделать поиск по ключевому слову на основе строчных букв, но ничего не получилось. 

    **TS.file**
    @Pipe({ name: 'filterByName' })
    export class filterNames implements PipeTransform {
      transform(listOfNames: string[], nameToFilter: string, ): string[] {
        var upperLetter=nameToFilter.toUpperCase();
        var smallLetter=nameToFilter.toLowerCase();
        if (!listOfNames) return null;
        if (!nameToFilter) return listOfNames;
        return listOfNames.filter(n =>
   ((n.indexOf(smallLetter) >= 0)||(n.indexOf(upperLetter) >= 0)) 
        );
      }
    }

    **Html file:**
    <mat-form-field class="example-full-width">
      <input [(ngModel)]="filterName" matInput placeholder="Find jobs">
    <mat-form-field

    <mat-nav-list *ngIf ="showlist"  #jobs>
      <mat-list-item *ngFor="let response of JOBS| filterByName:filterName">
        {{response}} 
      </mat-list-item>
    </mat-nav-list>

Я ожидаю, если пользователь введет тип «A» в поле поиска, список должен быть обновлен с использованием элементов списка «A» и «a».Теперь в этом случае обновляются только элементы «A».пожалуйста, дайте мне знать, если больше требуется ввод.Заранее спасибо.

1 Ответ

0 голосов
/ 28 мая 2019

Это можно сделать, указав имя в listOfNames (внутри фильтра) и nameToFilter в верхнем регистре. 

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

@Pipe({
  name: 'filterByName'
})
export class FilterNamesPipe implements PipeTransform {

  transform(listOfNames: string[], nameToFilter: string=''): string[] {
        var upperLetter = nameToFilter.toUpperCase();
        if (!listOfNames) return null;
        // console.log('listOfNames', listOfNames, 'nameToFilter', nameToFilter, 'upperLetter', upperLetter );
        if (!nameToFilter || nameToFilter === '') return listOfNames;
        return listOfNames.filter(name => 
          name.toUpperCase().startsWith(upperLetter)
        )
  }

}

Пример Stackblitz - https://stackblitz.com/edit/angular-so-56307438

...