Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to search multiple fields in ng-select?

I want to merge two API fields "code and name" in ng-select dropdown. For example:-

  Code       : MI

  name       : MI 3sPrime

 Format      : MI - MI 3sPrime

I used the below code for dropdown

Component.Html

<ng-select [items]="products" bindLabel="code" bindValue="id"
                placeholder="Select Goods Receipt" clearAllText="Clear" formControlName="productId" [searchFn]="customSearchFn">

                  <ng-template ng-label-tmp let-item="item">
                    <span [ngOptionHighlight]="search">{{ item.code }} - {{ item.name }}</span>
                  </ng-template>

                  <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
                    <span [ngOptionHighlight]="search">{{ item.code }} - {{ item.name }}</span>
                  </ng-template>

</ng-select>

Component.ts

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

Searching: Code and name is fetching while searching. But I want to search for code , name and given format(Code - name)

Below are the diagrams

enter image description here

Here, While I search the "MI -" , Searching not works

enter image description here

Searching should apply for the format code - name..Which means when I type MI -, filteration have to work. Is there any method? Can anybody help me?

like image 598
Angel Reji Avatar asked Jun 11 '19 12:06

Angel Reji


1 Answers

try this

  customSearchFn(term: string, item: any) {
    term = term.toLocaleLowerCase();
    return item.code.toLocaleLowerCase().indexOf(term) > -1 || 
    item.name.toLocaleLowerCase().indexOf(term) > -1 || 
    (item.code + " - " + item.name).toLocaleLowerCase().indexOf(term) > -1;
 }
like image 61
ysf Avatar answered Oct 09 '22 06:10

ysf