使用上下文自动完成和语法突出显示构建输入答案

【问题标题】：Build a input with contextual autocomplete and syntax highlighting使用上下文自动完成和语法突出显示构建输入
【发布时间】：2021-10-01 21:25:43
【问题描述】：

我想构建一个带有上下文自动完成功能的输入。也就是说，它应该知道光标在哪里，并且应该根据光标位置提供自动完成选项。我可以给出的最佳示例是 jira 上的高级 jql 查询输入。我知道他们通过使 div 内容可编辑并将所有关键字包装在跨度中来做到这一点。但是我缺少一些关于如何将它们联系在一起以及如何开始的知识。另外我需要以角度来做，所以任何角度特定的方法都会更有帮助。如果有任何开源项目可以实现类似的东西，那也会很有帮助。我可以浏览代码并尝试了解它是如何完成的。我对 Web 开发有点陌生，所以如果有人能提供帮助，那就太好了。

【问题讨论】：

这不是一件容易的事。 contenteditable 是一个可以与之合作的野兽。
请添加您尝试过的代码，如果您遇到问题，我们可能会帮助您修复它
嗨，我还没有写代码。我只是想找出一种方法来尝试它。我不是在寻找现成的解决方案，只是在寻找有关如何制作它的一些想法。

标签： javascript html css angular

【解决方案1】：

我想到的是通过使用[(ngModel)] 你总是知道输入的当前值。您可以使用.split(' ') 将其分解为单词数组，然后从该数组中的最后一个元素（即当前输入的单词）生成建议列表。然后以某种方式呈现它供用户选择。选择后，您可以将之前数组的最后一个单词替换为用户选择的单词，然后将其重建为一个字符串。

【讨论】：

是的，我也想过。我在这种方法中遇到的一件事是，如果有人向后移动并尝试编辑键或值或运算符，那么在这种情况下如何给出正确的建议。
也许您可以保留字符串的先前状态，并将每个键击的每个单词与新值进行比较。并且每次都针对不同的那个提出建议。