带有字符串和隐藏字段的Facebook风格标签.自动完成



我想使用jQuery创建一个类似于facebook状态更新的系统。

如果你看一下它的核心,在What's on your mind? textarea标签下面的几个元素,有一个隐藏的字段…

<input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value="">

当您在textarea字段中键入状态时,此隐藏字段的值将更改以匹配该状态。但是,如果您将某人标记到状态中,则隐藏字段将显示类似@[uid:User Name]的内容来代替用户名,以便稍后将其转换为超链接。

我自己也试过创建类似的东西,不是用用户,而是用标签。http://jsfiddle.net/nickjackson/qh3QP/

当我在第一个文本区域字段中输入#fun时,第二个文本区域显示#[tag:fun], #fun标记变为fun。这些都是正确的。但是,当我输入其他内容时,方括号消失了,因为#标签不再在状态字段中。我怎么解决这个问题?

最后,我如何创建一个文本区和隐藏字段组合,其工作原理类似于facebook状态更新,并允许使用标签?

我使用了3个字段—一个用于输入,一个用于存储tag内容,另一个用于显示文本。输入字段是不可见的,但位于显示字段的顶部。这应该是不言自明的,但问任何问题,你可能有-不,我没有快速的解决方案,没有光标。

http://jsfiddle.net/qh3QP/10/

正如Henry Garle所说,您不能在hidden-field中同时拥有多个编码标记(除非您在status-field中粘贴包含多个标记的文本),因为代码需要在status-field中找到标记,以便在hidden-field中创建它们的编码版本。由于在此之后它只保留status-field中标记的值,因此下次代码运行时(在按键事件之后),它将所述值视为常规文本,并将其简单地复制到hidden-field中,因为它无法将它们识别为标记的值。

修复很简单:因为一次只能创建一个标记,所以您所要做的就是修改代码,仅针对status-field中第一个出现的标记。由于没有其他标记作为目标,它们在hidden-field中的编码版本将被保留。

但是,在实现该修复之前,应该考虑为每个标记维护一个对象,该对象包含其值和位置数据。这种方法分离了标记的内部和外部表示,允许更快地定位标记,并在如何最终格式化标记方面提供了更大的灵活性。

mentiator是一个现有的、健壮的解决方案,它采用了提供您试图重新创建的功能的方法。考虑到它结构良好,易于遵循,并且有大量的评论,它应该对你有用,作为开箱即用的解决方案或参考材料,当你推出自己的。

最新更新