angular - 加速 Angular Material 自动完成或替代方案

Question

我正在使用 Angular Materials 自动完成功能来允许用户搜索以下格式的字符串:“[ID #] - [文本描述]”。数据在页面加载开始时预先检索，包含大约 39,000 个字符串。

我的 HTML 代码是:

<md-input-container>
    <input mdInput placeholder="TSN Search" [mdAutocomplete]="auto" [formControl]="TSN_Ctrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let tsn of filtered_TSNs | async" [value]="tsn">
        {{ tsn }}
    </md-option>
</md-autocomplete>

我的 typescript 代码是:

TSN_Ctrl: FormControl = new FormControl();
filtered_TSNs: any;

constructor(){
    this.filtered_TSNs = this.TSN_Ctrl.valueChanges
        .startWith(null)
        .map(val => val ? this.filter_TSNs(val) : this.dataService.tsnTitles.slice());
}

private filter_TSNs(val: string) {
    return this.dataService.tsnTitles.filter(option => new RegExp(`^${val}`, 'gi').test(option));
}

我基本上使用 Angular Materials 示例中的标准代码，并稍作调整。

自动完成功能非常慢，而且基本上没有响应。我知道有很多选项(39k 字符串)，但它是预先检索并本地存储的。

我可以做些什么来加快速度还是列表中的字符串太多了？如果我将过滤方法和字符串修改为仅包含 ID 字段，是否可以加快处理速度？我是否需要使用完全不同的库(即，如果已知 Angular Materials Autocomplete 速度很慢)？

Answer 1

Will Howell 的建议“真正的罪魁祸首可能是自动完成/Angular 试图呈现 39k 选项组件(!)你可能想返回 filter_TSNs 中的一个子集(比如前 50 个选项)”是问题所在，应该是接受的答案。通过将搜索功能限制为仅显示第 4 个字符之前的自动完成结果，自动完成变得即时。