时间戳

首页 > 解决方案 > 使用 Ng-select 显示搜索结果的延迟

angular - 使用 Ng-select 显示搜索结果的延迟

问题描述

我在 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[]>[];
        }
    }
}

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

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

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

非常感谢

标签： angulartypescriptangular-ngselect

解决方案

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

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

推荐阅读