Angular从Angular 2多选下拉列表中获取搜索词

Question

我使用angular2多选下拉菜单：https://www.npmjs.com/package/angular2-multiselect-dropdown在我的angular项目中，这是我的代码：

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

该组件运行良好，但我的问题是，当用户试图从列表中查找元素时，我没有找到如何获取搜索词，我想获取文本，然后进行一些http调用，从服务器中搜索数据。

当用户开始键入文本时，你知道如何捕捉搜索事件吗？

Answer 1

这是可能的，看看下面的例子，这就是我如何实现的：-

.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>