如何在Angular中实现类似Jira JQL的上下文自动补全与语法高亮输入框

核心逻辑拆解 #

• 基础容器层：用contenteditable="true"的div作为输入载体，原生input/textarea不支持关键词高亮和精准光标定位，无法满足需求
• 光标位置识别模块：
  1. 调用window.getSelection()获取当前选中的range对象，拿到光标相对于容器的偏移量
  2. 截取光标前后的文本片段，匹配当前输入的上下文规则，比如JQL类查询需要区分当前正在输入的是字段名、操作符还是枚举值
• 语法解析模块：
  1. 预先定义查询语法规则，比如JQL的字段 操作符 值的链式结构
  2. 每次输入完成后对容器内的全量文本做语法分词，把识别到的关键词用span标签包裹，添加不同样式类实现高亮
• 补全选项触发与渲染：
  1. 根据光标位置识别到的上下文类型生成对应补全列表，比如正在输入字段名就返回所有可选字段列表，输入值就返回对应字段的可选枚举
  2. 调用range的getBoundingClientRect()方法拿到光标坐标，计算补全弹窗的定位参数
  3. 用户选中补全项后，替换光标位置的输入片段，重新触发表法解析和高亮渲染

Angular专属实现步骤 #

• 第一步：封装可编辑输入组件，用@HostListener监听div的input、keydown、click事件，处理输入和光标定位逻辑
  示例代码片段：

  @Component({
    selector: 'app-autocomplete-input',
    template: `<div #editableDiv contenteditable="true" class="input-container"></div>`,
    styles: [`.input-container { border: 1px solid #d9d9d9; min-height: 32px; padding: 4px 8px; outline: none; }`]
  })
  export class AutocompleteInputComponent {
    @ViewChild('editableDiv') editableDiv: ElementRef<HTMLDivElement>;
  }
  

• 第二步：封装光标操作工具服务，提供获取光标偏移量、设置光标位置、替换光标处文本的通用方法，规避不同浏览器的原生API兼容问题
• 第三步：封装语法解析服务，根据业务规则实现分词、关键词匹配、高亮HTML生成的逻辑，简单场景可以用正则匹配实现，降低入门难度
• 第四步：开发补全弹窗组件，用@Input接收补全列表，@Output抛出选中事件，优先用Angular CDK的Overlay模块实现弹窗的全局定位，不需要手动处理层级、滚动跟随等问题

参考实现建议 #

新手不建议从零实现全量逻辑，contenteditable的浏览器兼容、光标操作、文本处理的坑非常多，优先考虑基于成熟的编辑器库二次开发：

• 可以参考Monaco Editor的自动补全触发逻辑，直接基于该编辑器定制专属的查询输入框，只需要实现自定义的补全项提供逻辑即可，不需要处理底层输入框的交互问题
• 也可以参考Angular生态内富文本编辑器的contenteditable处理逻辑，复用成熟的光标、文本操作工具方法

新手避坑提示 #

• 每次修改contenteditable的innerHTML后，需要手动重置光标位置，否则光标会自动跳到输入框末尾，破坏正常输入体验
• 不要用innerHTML直接拼接用户输入的内容，要做XSS防护，避免注入风险
• 初期优先实现单条简单语法的补全，再逐步扩展复杂的多条件组合语法，不要一开始就引入复杂的语法解析器增加开发难度

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