Блог

Я использую 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», поле не покажет результатов (многие пользователи могут пропустить запятые).

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

Вот stackblitz с примером выше:

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

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

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

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

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

 customSearchFn(term: string, item) {
  item.name = item.name.replace(',','');
  term = term.toLocaleLowerCase();
  return item.name.toLocaleLowerCase().indexOf(term) > -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