输入至少 3 个字符后，使 Ng2 选择显示列表

Question

我需要 ng2-select 给我一个项目列表，能够输入和过滤列表，自动完成功能。

问题是我的列表太大（+1000个项目），所以我的想法是仅在输入至少3个字符后才显示它，以便减少列表。

如果有更轻量级的自动完成字段，我也愿意。

Answer 1

您可以使用 npm 安装 ng2-auto-complete 组件。然后就可以配置使用了

min-chars，数字，当源为远程数据时，下拉列表中查看的字符数

Answer 2

您可以将项目设置为空，直到满足您的条件（3 个字符）。 所以你会得到这样的东西：

completeItems: Array<string> = []; //your 1k+ list
items: Array<string> = []; //reduced list of items to show

public search(searchString: string) {
    if(searchString.length>2){ //3 character minimum
        this.items = this.completeItems;
    }
    else{
        this.items = [];
    }
}

和你的 ng-select：

<ng-select
    [items]="items"
    (typed)="search($event)"
    (data)="refreshValue($event)"
    (selected)="selected($event)"
    (removed)="removed($event)">
</ng-select>

删除字符时遇到一些问题，但还是有的。