比如录入如下内容时: 出勤人员.出勤时间*工资

能够自动提示可选项"工资表.加班工资"、"工资表.正常工资"、"工资表.餐补"，并且选中后自动替换当前录入内容，可选项可以是提前缓存在本地国外服务器或实时请求后端数据。

这都是自己写的

你说的应该是 https://element.eleme.cn/里面的远程搜索？

感觉你们这个需求和 IDE 的智能补全差不多吧，做个简单的 DSL 的编译器吧，然后做个 language server 就可以复用 vs code 这类实现了 LSP 的编辑器的自动补全功能了

这个工作量可不小，从楼主问的问题来看，楼主基本没多少这方面的经验。如果只是老板拍脑袋的需求，建议直接怼回去算了

大多数框架自带 但是都不大好用
https://material-ui.com/zh/components/autocomplete/

前缀树搞一搞？

数据不多完全可以随便找个 combobox 配合巧妙的数据源设置就行了。
比如把
出勤人员
出勤人员.出勤时间
出勤人员.出勤时间*工资表.加班工资
出勤人员.出勤时间*工资表.正常工资
出勤人员.出勤时间*工资表.餐补
这几个都加入数据源，配合 combobox 或者 autocomplete 很容易就得到非常类似的输入体验了

https://github.com/microsoft/monaco-editor
参考下

monaco 是正确的解法