Angular 从 angular2-multiselect-dropdown 获取搜索词

Question

我在我的 Angular 项目中使用来自：https://www.npmjs.com/package/angular2-multiselect-dropdown 的 angular2-multiselect-dropdown，这是我的代码：

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>