How to search multiple fields in ng-select?

Question

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

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

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?

ysf · Accepted Answer · 2019-06-11 13:08:20Z

9

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;
 }

answered Jun 11, 2019 at 13:08

ysf

4,9023 gold badges31 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DSoa Over a year ago

Use an arrow function if you want "this" to be defined. customSearchFn = (term: string, item: any) => { // Can use this.something here }

Vanderson Dill Over a year ago

at html -> <ng-select [searchFn]="customSearchFn">

Collectives™ on Stack Overflow

How to search multiple fields in ng-select?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related