1

我在 keyup 事件上使用带有自定义 ajax 搜索功能的 Ng-select 组件。

这是我的代码:

<ng-select [items]="employes"
    bindLabel="displayName"
    [addTag]="false"
    [multiple]="true"
    [hideSelected]="true"
    labelForId="employesmultiselect"
    (keyup)="multiselectSearch($event)"
    [(ngModel)]="selectedEmploye"
    formControlName="multiselect" name="multiselect" id="multiselect" >
</ng-select>

这是搜索功能:

multiselectSearch(event: any) {
    const   employesmultiselect= ((document.getElementById("employesmultiselect") as HTMLInputElement).value);
    console.log(employesmultiselect);
    if (event.keyCode !== 40 && event.keyCode !== 38) {
        if (employesmultiselect.length > 2) {
            this.employeService.getEmployes(employesmultiselect)
            .subscribe(data => {
                this.employes = <IEmploye[]>[];
                this.employes = data;
                console.log(employesmultiselect);
            });
        } else {
            this.employes = <IEmploye[]>[];
        }
    }
}

问题是当我非常快地输入文本时,我没有得到预期的结果

例如,如果我快速输入“用户”,我会得到“使用”的结果,使用的结果会覆盖“用户”的结果

你们知道如何解决这个问题吗?

非常感谢

4

1 回答 1

2

检查 ng select repo ( https://github.com/ng-select/ng-select/blob/master/demo/app/examples/search.component.ts )中提供的搜索示例

那里有使用 debounce 和 RxJS 管道的示例。

于 2018-08-01T17:55:23.973 回答