Javascript 用逗号分隔的标记的输入字段

我正在开发一个web应用程序，它允许用户通过标记发布内容，但问题是，如果标记被逗号分隔，并且文本字段值仍然相同，但用户的视图不同，我如何在标记周围创建一个漂亮的块

例如YouTube或StackOverflow，现在我不需要它来检查数据库或任何东西

---

谢谢

将文本输入放在div中，然后检查按键（如逗号或空格键），如果它与键匹配，则使用jQuery将带有标记详细信息的新span追加到div中

---

如果需要，我可以提供更多的细节或示例，但编码应该相当简单。

类似于堆栈溢出的功能：

• 允许字母数字和

  +-.#

  （并修剪空白！）
• 转换成小写
• 在focusOut回车时自动创建标记框（添加更多

  |

  分隔键代码）
• 单击时删除标记框（确认后）

$（函数（）{//DOM就绪
//：：标签框
$（“#标记输入”）。在({
focusout:function（）{
var txt=this.value.replace（//[^a-z0-9\+\-\.\\\.\\\\.\\\\]/ig'，）；//允许的字符
if（txt）$（“”，{text:txt.toLowerCase（），insertBefore:this}）；
此值为“”；
},
键控：功能（ev）{
//如果：逗号|输入（用|管道分隔更多键码）
if（/（188 | 13）/.test（ev.which））$（this.focusout（）；
}
});
$（'#标记'）。在（'click'，'span'，function（）上{
如果（确认（“删除”+$（this.text（）+“？”））$（this.Remove（）；
});
});
#标记{
浮动：左；
边框：1px实心#ccc；
填充物：5px；
字体系列：Arial；
}
#标签>跨度{
光标：指针；
显示：块；
浮动：左；
颜色：#fff；
背景：#789；
填充物：5px；
右边填充：25px；
保证金：4倍；
}
#标记>范围：悬停{
不透明度：0.7；
}
#标记>范围：之后{
位置：绝对位置；
内容：“×”；
边框：1px实心；
填充物：2px 5px；
左边距：3倍；
字体大小：11px；
}
#标签>输入{
背景：#eee；
边界：0；
保证金：4倍；
填充：7px；
宽度：自动；
}

php
C++
jquery
您不一定需要在这里重新发明轮子。已经存在许多用于此目的的库/插件，其中一个是Guillermo Rauch的。你可以找到一个示范。它已经有了自动完成支持和一个相当广泛的API，这是任何实现这一功能的主要障碍

最初的实现使用了MooTools，但您可以找到golive的jQuery版本。
在select2列表中使用“标记支持”：

我想制作一个类似Facebook用于标记人的标记框，并发现可用选项过于臃肿和/或不执行我想要的关键操作：要求标记存在于预设列表中（可以从AJAX调用中检索）

我从开始，然后补充了一些重要的东西


箭头键导航
正如我上面所说的，需要预设答案
data-
属性，便于收集ajax帖子

好的，我知道你要去哪里，但是你能给我举个例子吗？提前谢谢！@fermionoid:你为什么不先做一个呢？@Blender，我不太明白div会如何影响文本区域，我认为文本区域不能有单独的样式，而且我也没有真正的javascript支持，这更像是adva这就是我在js中通常做的。@fermionoid:用
标记制作一个假文本区域，并使文本框完全不带样式。@MattG我建议也使用contenteditable div。你怎么看？嗯，这并不能完全用逗号分隔标记…谢谢你的尝试！无论如何，我已经加上了答案。@fermionoid添加了逗号：）看一看，我建议使用内容可编辑div。。它更容易我认为完美，现在我只需要实现这一点@这是一个非常好的实现，但实际上没有API。除了文档遍历之外，没有办法检索标记值。就像我以前说过的，你真的不需要在这里重新发明轮子。来吧，你正在杀死所有的人fun@roXon别误会，我对你的答案投了赞成票，但这纯粹是视觉上的。制作一个能够方便访问数据的API还需要一些工作，但是为什么要重新发明轮子呢？@fermionoid我个人还没有用过这个，但是你也可以试试。我的观点是，基本上你不需要编写一堆代码，也不需要调试已经为你做过的边缘案例。没错，我确实理解你的观点，我已经对你的答案投了赞成票，我的实现出了什么问题：？没关系，我想我找到了实现的答案：）
    $(".js-example-tags").select2({
  tags: true
})