自动完成功能滞后

Question

我有一个超过 20k 个值的数据源。因此，当我使用ant设计自动完成时，加载数据需要很长时间..如何降低自动完成加载速度并减少延迟。

我有自动完成组件工作正常，但需要降低加载速度。

<AutoComplete
     ref={this.inputElement}
     value={this.state.currentItem.text}
     dataSource={this.state.keySource}
     style={{ width: 200 }}
     onSelect={onKeywordSelect}
     onSearch={this.handleKeySearch}
     className="text-input form-control" 
     placeholder="Type any gene name, drug name.."
/>

Answer 1

如果数据源文件太大，则应在服务器端执行此操作。您应该具有带有查询字符串的 UI 调用 api，并让服务器找到匹配的数据并返回它。

您还可以像树一样以某种方式对 20k 数据进行排序，以便查询速度更快或使用数据库。