Angular get the search term from angular2-multiselect-dropdown

Question

I'm using angular2-multiselect-dropdown from: https://www.npmjs.com/package/angular2-multiselect-dropdown in my angular project and this is my code:

html:

<angular2-multiselect [data]="myData" [(ngModel)]="selectedItems" 
            [settings]="dropdownSettings" 
            (onSelect)="onItemSelect($event)" 
            (onDeSelect)="OnItemDeSelect($event)"
            (onSelectAll)="onSelectAll($event)"
            (onDeSelectAll)="onDeSelectAll($event)" >
          </angular2-multiselect>

ts:

// code ...
      this.myData = [
        {"id":'1',"itemName":"babaki mora"},
        {"id":'2',"itemName":"Jhon smith"},
        {"id":'3',"itemName":"Alo dalo"}
      ];
   
   onItemSelect(item: any) {
    
        console.log(item);
        console.log(this.selectedItems);
    }
    OnItemDeSelect(item: any) {
        console.log(item);
        console.log(this.selectedItems);
    }
    onSelectAll(items: any) {
        console.log(items);
    }
    onDeSelectAll(items: any) {
        console.log(items);
    }

    onFilterSelectAll(items: any){
      alert(items);
    }

The component works fine, but my issue is I didn't find how I can get the search term when the user tries to find an element from the list, I want to get the text then make some http calls search the data from the server.

Do you have any idea on how I can catch the search event when the user starts typing the text?

Answer 1

This is possible, look at the example below this is how i achieved this :-

.ts :-

export class CustomSearchExample implements OnInit {

    itemList: any = [];
    selectedItems = [];
    settings = {};

    constructor(private http: HttpClient) { }
    ngOnInit() {

        this.settings = {
            text: "Select Countries",
            selectAllText: 'Select All',
            unSelectAllText: 'UnSelect All',
            classes: "myclass custom-class",
            primaryKey: "alpha3Code",
            labelKey: "name",
            noDataLabel: "Search Countries...",
            enableSearchFilter: true,
            searchBy: ['name', 'capital']
        };
    }
    onSearch(evt: any) {
        console.log(evt.target.value);
        this.itemList = [];
        this.http.get('https://restcountries.eu/rest/v2/name/'+evt.target.value+'?fulltext=true')
            .subscribe(res => {
                console.log(res);
                this.itemList = res;
            }, error => {

            });
    }
    onItemSelect(item: any) {
        console.log(item);
        console.log(this.selectedItems);
    }
    OnItemDeSelect(item: any) {
        console.log(item);
        console.log(this.selectedItems);
    }
    onSelectAll(items: any) {
        console.log(items);
    }
    onDeSelectAll(items: any) {
        console.log(items);
    }
}

.html :-

<angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings" (onSelect)="onItemSelect($event)"
    (onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">
    <c-search>
         <ng-template>
             <input type="text" (keyup)="onSearch($event)" placeholder="Search countries" style="border: none;width: 100%; height: 100%;outline: none;"/>
         </ng-template>
    </c-search>
    <c-item>
        <ng-template let-item="item">
            <label style="color: #333;width: 150px;">{{item.name}}</label>
            <img [src]="item.flag" style="width: 30px; border: 1px solid #efefef;margin-right: 0px;" />
            <label>{{item.capital}}</label>
        </ng-template>
    </c-item>
</angular2-multiselect>