像Sublime的JS / jQuery / CSS下拉建议框

Question

我目前正在制作一个网络应用编辑器，我已经实施了建议框。现在，此建议框已固定在页面顶部，但我想在我正在键入的文本下方弹出一个建议框。 Sublime的建议框正是我正在寻找的：

我已尝试搜索有关如何实现此类功能的提示，但我从搜索中获得的所有内容都是静态字段（如不移动的搜索框）或下拉菜单。我想在我正在键入的当前单词下方弹出建议框，这意味着它无法固定到特定位置。

有关从何处开始的任何提示？谢谢！

Answer 1

jQuery有一个插入插件，你可以获得插入符号的位置。然后你可以去$(textarea).caret();，然后调整框的位置低几个像素。

Answer 2

有趣的想法，我到目前为止的想法（未尝试组合）如下所列。很抱歉没有提供很多链接，但我认为每个部分都足够小，可以按需查找。

装箱本身

可以通过无序列表ul构建此类建议框。只需将其格式化为最大尺寸，即可使用。

<强>定位

你想把它放在光标下，我想你正在使用textarea。从快速搜索中，有一个plugin on GitHub，它为您提供文本光标的窗口坐标。所以我们现在有一个可以用来定位盒子的位置，很棒。提示：这是一个固定的定位，只需为每个新角色更新它。

<强>相互作用

到目前为止，我们希望有一个风格和定位的意见箱。我会抓住textarea值并将其修剪到光标前面的最后一个单词。这个字符串可以通过AJAX，本地或任何你喜欢使用的方式查找。

一旦你有了一套建议并填写了建议框，至少我希望得到键盘支持。要执行此操作，只需为向上/向下箭头添加键盘侦听器，输入和Tab键。对于所有四个，您还需要阻止textarea默认对此键做出反应。

建议元素上的点击监听器也很有用。单击或制表符/输入后，您只想修改光标位置的textarea值。