I have multi-select drop-down with check-boxes and a drop-down list options. I wanted to implement an run time/dynamic filtered search for the drop-down options. I was able to implement filtered search but not that at run time.

this.options = [{ value: "Small", selected: false },
        { value: "Medium", selected: false},
        { value: "Large", selected: false }]

filterUsers() {
        let filterUsers= this.options.filter(item => item.value === this.selectedUser);
        if (filterUsers.length > 0) {
            this.options = filterUsers;
        }
 }    
        console.log(filterUsers);
    }

HTML

<input type = "text" [(ngModel)]="selectedUser" (input) = "filterUsers()">

How can I achieve filtered search dynamically?

I have multi-select drop-down with check-boxes and a drop-down list options. I wanted to implement an run time/dynamic filtered search for the drop-down options. I was able to implement filtered search but not that at run time.

this.options = [{ value: "Small", selected: false },
        { value: "Medium", selected: false},
        { value: "Large", selected: false }]

filterUsers() {
        let filterUsers= this.options.filter(item => item.value === this.selectedUser);
        if (filterUsers.length > 0) {
            this.options = filterUsers;
        }
 }    
        console.log(filterUsers);
    }

HTML

<input type = "text" [(ngModel)]="selectedUser" (input) = "filterUsers()">

How can I achieve filtered search dynamically?

• javascript
• angular
• typescript

• what is the real problem you are facing? – Muhammad Abdullah Commented Nov 26, 2019 at 6:44
• i think your function are not returning you empty array – Muhammad Abdullah Commented Nov 26, 2019 at 6:44

4 Answers 4

Try like this:

  options = [
    { value: "Small", selected: false },
    { value: "Medium", selected: false },
    { value: "Large", selected: false }
  ];

  selectedUser: any;
  filterdOptions = [];
  filterUsers() {
    this.filterdOptions = this.options.filter(
      item => item.value.toLowerCase().includes(this.selectedUser.toLowerCase())
    );
    console.log(this.filterdOptions);
  }

Demo

If you start typing sm, the filtered option will show the object with value Small

You can use a pipe for this type of task if you want this to be dynamic (i.e. based on changing values or input search terms). See https://angular.io/guide/pipes

To implement in your case, first create this pipe (and reference in your app module declarations);

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'searchOptions'
})
export class SearchOptionsPipe implements PipeTransform {
    transform(items: any[], filter: string): any {
        if (!items || !filter) {
            return items;
        }

        // This will search and match any option.value that contains the search term
        return items.filter(item => item.value.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
    }
}

Then in your component.html (wherever you are *ngFor'ing your options);

<mat-option 
    *ngFor="let option of options | searchOptions:searchTerm"
    [value]="option.value"  ... >{{ option.title }}</mat-option>

And finally in your component.ts you can configure the options and search;

options = [
             {value: 'apple', title: 'Yummy Apple'}, 
             {value: 'orange', title: 'Juicy Orange'}, 
             {value: 'pineapple', title: 'Sweet Pineapple'}
          ];

searchTerm = 'apple'; // Would show the 1st and 3rd item

try this:

options = [
{ value: "Small", selected: false },
{ value: "Medium", selected: false },
{ value: "Large", selected: false }
 ];

 selectedUser: any;
 filterdOptions = [];
 filterUsers() {
 this.filterdOptions = this.options.filter((item:any)=>{
  return  item.value.toLowerCase()=== this.selectedUser.toLowerCase()
 });
console.log(this.filterdOptions);
}

To make it more general I would modify Muhammad Abdullah's answer like this:

transform(items: any[], filter: string, propertyName: string): any {
if (!items || !filter) {
    return items;
}

// This will search and match any option.value that contains the search term
propertyName = propertyName || 'value' ;
return items.filter(item => item[propertyName].toLowerCase().indexOf(filter.toLowerCase()) !== -1);

}

then you use it like this in html file, if your objects have a property called description and you want to filter them using that property.

<mat-option 
*ngFor="let option of options | searchOptions:searchTerm:'description'"
[value]="option.value"  ... >{{ option.title }}</mat-option>