一起使用 jQuery tokeninput 和 text答案

【问题标题】：Using jQuery tokeninput and text together一起使用 jQuery tokeninput 和 text
【发布时间】：2014-12-09 05:38:27
【问题描述】：

我希望用户在我的 ASP.NET MVC 应用程序的 TextBox 中给我一个长字符串值。在字符串中，如果用户输入了我系统中已有的单词，我想用 jQuery 标记显示它。

这最好用一个例子来解释：

假设用户输入的短语是“我每天早上都喝咖啡，周日早上除外”。在这个例子中，假设我的数据库中已经有了“coffee”和“Sunday”这两个词以及它们各自的 ID，例如咖啡 ID：123 和“星期日” ID：7789

我想要做的是，当用户键入短语时，我想用他们的 jQuery 输入令牌自动替换“咖啡”和“星期天”这两个词。这个想法是，如果可能的话，我会用自己的 ID 来标识每个单词，即咖啡是 123，星期日是 7789。

因此，当我将这个短语保存在我的系统中时，我可以将其存储为“我每天早上都喝 [Id:123]，除了 [Id:7789] 早上”。但是，用户在输入时会看到该短语，但熟悉的单词表示为 jQuery 标记。

我可以使用一些帮助来创建这种行为。

【问题讨论】：

使用 jquery 插件进行 token 输入，并将所有关键字的 json 保存在本地存储中以便快速响应
问题是将标记与文本混合。我从未见过将标记和常规文本混合在一起，即 word1 [token1] word2 word 3 [token2]
所以做一些你在其他网站上看到的事情。否则会混淆和打扰用户。您还可以在服务器上解析整个字符串以分离出您在数据库中的单词。

标签： jquery asp.net-mvc jquery-ui jquery-select2 jquery-tokeninput

【解决方案1】：

这可以使用jQuery TokenInput。（从 Github 下载最新版本以获得免费标记功能，而不是从网站上下载旧的 1.6.0。）

我为一个基于文本翻译的项目做了类似的事情，其中字典中找不到的短语以不同的方式显示。没有“tokens”和“non-tokens”，所有东西都是一个token，只是一些token可以通过添加一个CSS类来设置样式，看起来像普通文本。

使用 TokenInput，确保您将allowFreeTagging:true 设置为允许输入非字典单词。我想你会想要 space 来“提交”一个标签，并单独处理每个单词。然后利用onFreeTaggingAdd() 回调为那些不在您的字典中的标签添加一个新的css 类。 CSS 将简单地删除所有围绕文本放置的边框、背景颜色和填充，使其看起来像一个“数字”。我相信您还应该能够通过选项或对代码库进行简单修改来摆脱每个令牌上的删除按钮。

【讨论】：