[英]search or filter data based on first letter match
I am using ng-select library for implementing a search dropdown.我正在使用ng-select 库来实现搜索下拉列表。 I am trying to implement a custom function that will filter items by first matching letter in the dropdown when I start typing.我正在尝试实现一个自定义函数,该函数将在我开始输入时通过下拉列表中的第一个匹配字母来过滤项目。 For example if user types in 'A', it should only show People name in the dropdown that starts with "A".例如,如果用户输入“A”,它应该只在以“A”开头的下拉列表中显示人员姓名。
I have created an stackblitz example.我创建了一个stackblitz示例。 I tried using Array.filter() function, but filter function won't work since the ' item ' I am getting returned from my ' customSearchFn ' is not in an array.我试着用Array.filter()函数,但是过滤功能会因为“项”我收到从我的“customSearchFn”返回不工作是不是在数组中。 Is there a way to implement this without using filter function?有没有办法在不使用过滤功能的情况下实现这一点?
hello.component.ts 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);
}
}
You only need to modify your customSearchFunction to:您只需将 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())
}
Working stackblitz工作堆栈闪电战
FYI, the custom function is called with every item on your list.仅供参考,您的列表中的每个项目都会调用自定义函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.