DevExtreme表单dxAutoComplete城市字段编辑时值显示延迟问题咨询

问题核心成因 #

• dxAutocomplete的匹配规则和普通输入控件不同：它接收到表单绑定的初始值后，不会立刻把值渲染到输入框，必须等关联的dataSource完成首次加载、拿到全量可匹配的数据集后，才会按照valueExpr的配置从数据中匹配对应记录，把匹配到的文本展示出来。只要城市数据源是异步加载、延迟初始化的，就一定会出现“表单值已经拿到，但控件等数据源加载完才显示内容”的延迟。
• 初始化时机错位：当前配置直接把CitiesCS变量作为dataSource传入，如果这个变量是在表单渲染阶段才初始化、才触发远程请求拉取城市列表，那表单绑定的CITY值会先到达编辑器，这时候数据源还未加载完成，控件找不到匹配的记录，只能先留空，等数据返回后再补渲染，就是用户感知到的等待延迟。
• 配置缺失拖慢匹配效率：现有配置仅指定了valueExpr，未明确配置displayExpr，控件匹配到值之后还需要自行遍历字段推导需要展示的内容，在异步数据源场景下会进一步拉长等待时间。

可落地的优化方案 #

• 不要把数据源的加载流程绑定到编辑器初始化阶段。将CitiesCS提前封装为初始化完成的DataSource实例，在页面启动阶段就把全量城市列表拉取到本地缓存，等数据源加载完成后再渲染表单，从根源上消除“值先到、数据后到”的错位问题。
• 在现有editorOptions配置中补充displayExpr: "CITY_DISPLAY"，直接告知控件匹配到对应值后需要展示的字段内容，省掉控件内部的字段推导开销。
• 如果表单详情和城市列表是两个独立的远程接口，就并行触发两个请求的加载流程，等两个接口都返回数据后再初始化Form，此时编辑器拿到的绑定值、加载完成的数据源都是现成的，不存在等待渲染的间隙。
• 城市列表总数据量不大的场景下，直接将数据转换为同步的本地静态数组即可，完全省去异步加载的等待过程——本地静态数据源是同步初始化的，绑定值会在控件渲染时直接匹配展示，不会出现延迟。

避坑提示：不要把带远程分页逻辑的数据源直接挂在配置项上，这类数据源必须等首次接口请求返回才具备值匹配能力，必然会带来绑定值的显示延迟。

内容的提问来源于stack exchange，提问作者psyphorxa