我目前正在制作一个网络应用编辑器,我已经实施了建议框。现在,此建议框已固定在页面顶部,但我想在我正在键入的文本下方弹出一个建议框。 Sublime的建议框正是我正在寻找的:
我已尝试搜索有关如何实现此类功能的提示,但我从搜索中获得的所有内容都是静态字段(如不移动的搜索框)或下拉菜单。我想在我正在键入的当前单词下方弹出建议框,这意味着它无法固定到特定位置。
有关从何处开始的任何提示?谢谢!
答案 0 :(得分:1)
jQuery有一个插入插件,你可以获得插入符号的位置。然后你可以去$(textarea).caret();
,然后调整框的位置低几个像素。
答案 1 :(得分:0)
有趣的想法,我到目前为止的想法(未尝试组合)如下所列。很抱歉没有提供很多链接,但我认为每个部分都足够小,可以按需查找。
装箱本身
可以通过无序列表ul
构建此类建议框。只需将其格式化为最大尺寸,即可使用。
<强>定位强>
你想把它放在光标下,我想你正在使用textarea
。从快速搜索中,有一个plugin on GitHub,它为您提供文本光标的窗口坐标。所以我们现在有一个可以用来定位盒子的位置,很棒。提示:这是一个固定的定位,只需为每个新角色更新它。
<强>相互作用强>
到目前为止,我们希望有一个风格和定位的意见箱。我会抓住textarea
值并将其修剪到光标前面的最后一个单词。这个字符串可以通过AJAX,本地或任何你喜欢使用的方式查找。
一旦你有了一套建议并填写了建议框,至少我希望得到键盘支持。要执行此操作,只需为向上/向下箭头添加键盘侦听器,输入和Tab键。对于所有四个,您还需要阻止textarea
默认对此键做出反应。
建议元素上的点击监听器也很有用。单击或制表符/输入后,您只想修改光标位置的textarea
值。