一起使用jQuery tokeninput和text

时间:2014-12-09 05:38:28

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

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

通过示例更好地解释了这一点:

让我们说用户输入的短语是"除了星期天早晨,我每天早上都喝咖啡。"在这个例子中,让我们说我已经有了" coffee"和"星期天"在我的数据库中使用各自的ID,例如咖啡Id:123和" Sunday" Id:7789

我尝试做的是,当用户输入短语时,我想自动替换单词" coffee"和"星期天"用他们的jQuery inputtokens。我的想法是,如果可能的话,我会用自己的ID识别每个单词,即咖啡是123,星期日是7789。

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

我可以在创建此行为时使用一些帮助。

1 个答案:

答案 0 :(得分:1)

使用jQuery TokenInput可以实现这一点。 (从Github下载最新版本的freetagging功能,而不是网站上的旧版1.6.0。)

我为基于文本翻译的项目做了类似的事情,其中​​字典中未找到的短语的显示方式不同。一切都将成为令牌,而不是拥有“令牌”和“非令牌”,只需通过添加CSS类来设置一些令牌,使其看起来像普通文本。

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