Question

我将Ng-select组件与自定义ajax搜索功能结合使用，用于keyup事件。

这是我的代码：

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

问题是当我快速键入文本时，我没有得到预期的结果

例如，如果我快速键入“ user”，我将得到“ use”的结果，使用结果会覆盖“ user”的结果

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

非常感谢

Answer 1

检查ng select存储库（https://github.com/ng-select/ng-select/blob/master/demo/app/examples/search.component.ts）中提供的搜索示例

这里有使用去抖动和RxJS管道的示例。

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

1 个答案: