JQuery 令牌输入答案

【问题标题】：JQuery TokenInputJQuery 令牌输入
【发布时间】：2012-08-23 12:35:18
【问题描述】：

我正在使用 jQuery tokeninput 预填充文本区域。我有一个 JSON 数组来预填充文本区域，文本区域已正确填充，但是当我查看此插件创建的 <li> 时，它只包含每个条目的名称。

如何获取有关每个条目的其余信息？就我而言，例如描述、订单等。我需要它，因为我需要将所有这些条目插入数据库。

我的 jQuery 是

<script type="text/javascript">
    $(document).ready(function() {
        $("#text-area").tokenInput("", {
            theme: "facebook",
            prePopulate: [
                          {"id":"04d0d4b2-ac25-11e1-96a5-9787dec335c2","name":"Group 1","description":"Description of Patent Group 1","order":56250000,"is_deleted":false},
                          {"id":"9d4f6e5c-dd73-11e1-bed3-fbfe082dc‌761","name":"Group 3","description":"Description of Patent Group 3","order":70312500,"is_deleted":false},
                          {"id":"06d0d4b2-ac25-11e1-96a5-9787dec33‌5c2","name":"Group 2","description":"Description of Patent Group 2","order":84375000,"is_deleted":false}
                         ]
        });
    });
</script>

【问题讨论】：

标签： jquery jquery-tokeninput

【解决方案1】：

您需要使用tokenFormatter 选项：

为每个标记返回一个插入的 HTML 字符串的函数。将此功能与您选择的模板系统一起使用，例如 jresig 微模板或 mustache.js。当你想用这个包括图像或多行格式的标记。 Quora的人邀请返回头像标记的标记字段是一个很好的例子完成这个选项。

默认：function(item){ return “<li><p>” + item.propertyToSearch + “</p></li>” }(demo)。

像这样：

$(document).ready(function() {
    $("#text-area").tokenInput("", {
        theme: "facebook",
        prePopulate: [
                      {"id":"04d0d4b2-ac25-11e1-96a5-9787dec335c2","name":"Group 1","description":"Description of Patent Group 1","order":56250000,"is_deleted":false},
                      {"id":"9d4f6e5c-dd73-11e1-bed3-fbfe082dc‌761","name":"Group 3","description":"Description of Patent Group 3","order":70312500,"is_deleted":false},
                      {"id":"06d0d4b2-ac25-11e1-96a5-9787dec33‌5c2","name":"Group 2","description":"Description of Patent Group 2","order":84375000,"is_deleted":false}
                     ],
        resultsFormatter: function(item){ return "<li>" + "<img src='" + item.url + "' title='" + item.name + "' height='25px' width='25px' />" + "<div style='display: inline-block; padding-left: 10px;'><div class='full_name'>" + item.description + " " + item.order + "</div><div class='email'>" + item.is_deleted + "</div></div></li>" },
        tokenFormatter: function(item) { return "<li><p>" + item.name + " <b style='color: red'>" + item.description + "</b></p></li>" },
    });
});

【讨论】：

这个 resultsFormatter 是做什么用的？
tokenFormatter是对选中的token进行格式化，resultsFormatter是搜索列表的格式化器
该格式化程序函数上的item 是一个对象，它映射为以json 形式给出的对象。这意味着您可以以任何方式格式化您的 html 字符串，例如：'<li id="'+item.id+'">'+ item.name +'</li>'
完成了，谢谢...现在在表格中，我为每个令牌都有一个 ul 和 li，将每个条目插入数据库的最佳方法是什么？
还有一件事，带有所有标记的 ul 是预先填充的，但不在文本区域之外的文本区域中。为什么会这样？

【解决方案2】：

您可以使用onAdd，onDelete函数将所选项目描述，订单存储到一些变量中。

onAdd:function(item)
{
    alert(item.description);
    alert(item.order);
    //push into array
}
onDelete:function(item)
{
    //remove from array
}

【讨论】：