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>

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

Angular get the search term from angular2-multiselect-dropdown

multi-select

dropdown

angular