基于首字母匹配的搜索或筛选数据

Question

我正在使用ng-选择图书馆实现一个搜索下拉列表。我正在尝试实现一个自定义函数，当我开始打字时，它将通过在下拉列表中的第一个匹配字母来过滤项目。例如，如果用户输入'A'，它只应该在以"A“开头的下拉列表中显示人员名称。

我创建了一个stackblitz示例。我尝试使用Array.filter()函数，但是筛选函数不能工作，因为从Array.filter返回的'item‘不在数组中。是否有一种不使用过滤器功能来实现这一功能的方法？

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: 'karynwright@zolar.com',
      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: 'rochelleestes@extrawear.com',
      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: 'nguyenelliott@portaline.com',
      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: 'millsbarnett@farmex.com',
      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: 'yvettenavarro@kinetica.com',
      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: 'elisaguzman@kage.com',
      phone: '+1 (868) 594-2919'
    }
  ];

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

  }
}

Answer 1

只需将customSearchFunction修改为：

 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())
 }

工作stackblitz

FYI，自定义函数将与列表中的每一项一起调用。