加快角材料的自动完成速度或替代方法

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>

我的打字稿代码是：

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自动完成速度较慢）？

Answer 1

Will Howell 的建议“真正的罪魁祸首可能是尝试渲染 39k 选项组件的自动完成/角度（！）您可能希望返回 filter_TSN 中的子集（如前 50 个选项）”是问题所在，应该是可接受的答案。通过将搜索功能限制为仅显示自动完成的结果直到第 4 个字符，自动完成变得即时。