Чувствительность поиска в выпадающем меню (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'}
    ];

В поле выбора, если я ввожу «MA, B», тогда поле фильтруется до «MA, Boston», что является правильным.

Но если я наберу "MA Boston", в поле не будет результатов (многие пользователи могут пропустить запятые).

Есть ли способ заставить функцию поиска игнорировать запятые или менее чувствительны к ним?

Вот стекаблиц с примером выше:

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

Answer 1

Быстрый способ сделать это - заменить все запятые пустой строкой.

Во-первых, в вашем component.html вам нужно будет передать привязку входного свойства для searchFn с вашей собственной пользовательской функцией поиска .

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

И затем в вашем component.ts вы определите customSearchFn следующим способом. Это быстрый взлом, но я заменил запятые на пустую строку для этого конкретного объекта. Например, Бостон станет магистром Бостона.

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

Демо

Answer 2

Вы можете иметь такую ​​функцию, как:

  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