时间戳

首页 > 解决方案 > 下拉菜单中的搜索灵敏度（ng-select，角度）

angular - 下拉菜单中的搜索灵敏度（ng-select，角度）

问题描述

我将ng-select与城市列表一起使用，如下所示：

cities = [
        {id: 1, name: 'MA, Boston'},
        {id: 2, name: 'FL, Miami'},
        {id: 3, name: 'NY, New York', disabled: true},
        {id: 4, name: 'CA, Los Angeles'},
        {id: 5, name: 'TX, Dallas'}
    ];

在选择字段中，如果我键入“MA，B”，则该字段过滤为“MA，波士顿”，这是正确的。

但是，如果我输入“MA Boston”，该字段不会显示任何结果（许多用户可能会错过逗号）。

有没有办法让搜索功能忽略逗号，或者对它们不那么敏感？

这是上面示例的堆栈闪电战：

https://stackblitz.com/edit/ng-select-mbnngu

标签： angularselectangular-ngselect

解决方案

这样做的一个快速技巧是将所有逗号替换为空字符串。

首先，在您的 component.html 上，您需要searchFn使用您自己的自定义搜索函数传递输入属性绑定。

<ng-select 
  [items]="cities"
  [searchFn]="customSearchFn"
  bindLabel="name"
  placeholder="Select city"
  [(ngModel)]="selectedCity">
</ng-select>

然后，在您的 component.ts 上，您将customSearchFn使用以下方法进行定义。这是一个快速的 hack，但我所做的是将逗号替换为该特定对象的空字符串。例如 MA，Boston 将成为 MA Boston。

customSearchFn(term: string, item) {
  item.name = item.name.replace(',','');
  term = term.toLocaleLowerCase();
  return item.name.toLocaleLowerCase().indexOf(term) > -1;
}

演示

推荐阅读