下拉列表中的搜索灵敏度 (ng-select, angular)

Question

我正在使用 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'}
    ];

在 select 字段中，如果我键入 "MA, B"，则该字段会过滤为 "MA, Boston"，这是正确的。

但是，如果我键入 "MA Boston"，该字段不会显示任何结果（许多用户可能会漏掉逗号）。

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

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

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

Answer 1

你可以有这样的功能：

  searchMe(searchTerm: string, eachObject) {
      let replacedKey = searchTerm.replace(/[,\.-\s]/g, '')
      let newRegEx = new RegExp(replacedKey, 'gi');
      let purgedName = eachObject.name.replace(/[,\.-\s]/g, '')
      if (newRegEx.test(purgedName)) {
        return true
      }
      return false
  }


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

看这里：https://stackblitz.com/edit/ng-select-ghnvko?file=app/app.component.ts

Answer 2

一个快速的破解方法是用空字符串替换所有逗号。

首先，在您的 component.html 上，您需要使用自己的 custom search function 传递 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;
}

Demo

下拉列表中的搜索灵敏度 (ng-select, angular)

Search sensitivity in dropdown (ng-select, angular)

select

angular-ngselect

angular