javascript - mencari atau memfilter data berdasarkan kecocokan huruf pertama

Saya menggunakan pustaka ng-select untuk mengimplementasikan dropdown pencarian. Saya mencoba mengimplementasikan fungsi kustom yang akan menyaring item berdasarkan huruf pertama yang cocok di dropdown ketika saya mulai mengetik. Misalnya, jika pengguna mengetik 'A', seharusnya hanya menampilkan nama Orang di dropdown yang dimulai dengan "A".

Saya telah membuat contoh stackblitz. Saya mencoba menggunakan fungsi Array.filter(), tetapi fungsi filter tidak akan bekerja karena ''item' yang saya dapatkan dari 'customSearchFn' saya tidak berada dalam array. Apakah ada cara untuk menerapkan ini tanpa menggunakan fungsi filter?

hello.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `
    <ng-select
      [items]="people"
      bindLabel="name"
      autofocus
      [searchFn]="customSearchFn"
    >
    </ng-select>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class HelloComponent {
  @Input() name: string;
  people = [
    {
      id: '5a15b13c36e7a7f00cf0d7cb',
      index: 2,
      isActive: true,
      picture: 'http://placehold.it/32x32',
      age: 23,
      name: 'Karyn Wright',
      gender: 'female',
      company: 'ZOLAR',
      email: '[email ',
      phone: '+1 (851) 583-2547'
    },
    {
      id: '5a15b13c2340978ec3d2c0ea',
      index: 3,
      isActive: false,
      picture: 'http://placehold.it/32x32',
      age: 35,
      name: 'Rochelle Estes',
      disabled: true,
      gender: 'female',
      company: 'EXTRAWEAR',
      email: '[email ',
      phone: '+1 (849) 408-2029'
    },
    {
      id: '5a15b13c2b1746e12788711f',
      index: 11,
      isActive: true,
      picture: 'http://placehold.it/32x32',
      age: 25,
      name: 'Nguyen Elliott',
      gender: 'male',
      company: 'PORTALINE',
      email: '[email ',
      phone: '+1 (905) 491-3377'
    },
    {
      id: '5a15b13c605403381eec5019',
      index: 12,
      isActive: true,
      picture: 'http://placehold.it/32x32',
      age: 31,
      name: 'Mills Barnett',
      gender: 'male',
      company: 'FARMEX',
      email: '[email ',
      phone: '+1 (882) 462-3986'
    },
    {
      id: '5a15b13c947c836d177aa85c',
      index: 14,
      isActive: false,
      picture: 'http://placehold.it/32x32',
      age: 29,
      name: 'Yvette Navarro',
      gender: 'female',
      company: 'KINETICA',
      email: '[email ',
      phone: '+1 (807) 485-3824'
    },
    {
      id: '5a15b13c5dbbe61245c1fb73',
      index: 15,
      isActive: false,
      picture: 'http://placehold.it/32x32',
      age: 20,
      name: 'Elisa Guzman',
      gender: 'female',
      company: 'KAGE',
      email: '[email ',
      phone: '+1 (868) 594-2919'
    }
  ];

  customSearchFn(term: string, item: any) {
    console.log(term);
    console.log(item);

  }
}

Jawaban #1

Anda hanya perlu memodifikasi customSearchFunction Anda menjadi:

 customSearchFn(term: string, item: any) {
     // check if the name startsWith the input, everything in lowercase so "a" will match "A" 
     return item.name.toLowerCase().startsWith(term.toLowerCase())
 }

Bekerja stackblitz

FYI, fungsi kustom dipanggil dengan setiap item di daftar Anda.