select2 使用 JSON 标记答案

【问题标题】：select2 Tagging with JSONselect2 使用 JSON 标记
【发布时间】：2013-03-28 22:32:50
【问题描述】：

我刚开始使用 [select2][1]，我正在处理一个需要从 JSON 数据源填充的标签列表（如 StackOverflow 上）的项目。我正在使用在这个问题上找到的示例：[Tagging With Ajax In Select2][2] 但我在让它工作时遇到了一些麻烦。

        // Testing JSON load
        $("#testJsonLoad").select2({
            tags: true,
            tokenSeparators: [",", " "],
            createSearchChoice: function (term, data) {

                if ($(data).filter(function () {
                    return this.text.localeCompare(term) === 0;
                }).length === 0) {
                    return {
                        id: term,
                        text: term
                    };
                }
            },
            multiple: true,
            ajax: {
                url: 'data.json',
                dataType: "json",
                data: function (term, page) {
                    return {
                        q: term
                    };
                },
                results: function (data, page) {
                    return {
                        results: data
                    };
                }
            }
        });

仅出于测试目的，data.json 页面中包含以下数据：

{
"data": [
    { "id" : 1, "text" : "Alabama" },
    { "id" : 2, "text" : "Alaska" },
    { "id" : 3, "text" : "Arizona" },
    { "id" : 4, "text" : "Arkansas" },
    { "id" : 5, "text" : "California" },
    { "id" : 6, "text" : "Colorado" },
    { "id" : 7, "text" : "Connecticut" },
    { "id" : 8, "text" : "Delaware" },
    { "id" : 9, "text" : "District of Columbia" },
    { "id" : 10, "text" : "Florida" },
    { "id" : 11, "text" : "Georgia" },
    { "id" : 12, "text" : "Hawaii" },
    { "id" : 13, "text" : "Idaho" } ]
}

我的问题是我收到了这个错误： this.text 未定义 - 第 78 行

return this.text.localeCompare(term) === 0;

我认为这可能与我的 JSON 格式有关。我尝试了几种不同的格式，但我的大部分在线研究都没有产生积极的结果。

【问题讨论】：

标签： jquery json jquery-select2

【解决方案1】：

将调试器放在 if ($(data).filter(function () 之前并检查你在 $(data) 中得到了什么

【讨论】：

我的回报：[Object { tag={name="Name of tag"}}]
这是无效的 JSON。它应该是：{ tag:{name:"Name of tag"}}
抱歉，这只是 Firebug 报告/格式化输出的格式。 JSON实际上是正确的，请参阅我的答案...

【解决方案2】：

我发现了问题。我需要在结果 ajax 函数中调用 data.data（在我的示例中）。

例子：

 results: function (data, page) {
                return {
                    results: data.data
                };
            }

【讨论】：

你的 JSON 是什么样的？

【解决方案3】：

Results 需要 json 中的 id 和 text 节点，您可以告诉 JSON 使用这些节点名称输出结果，或者指定在 JS 中使用哪个节点：

来自网站的示例：

query: function (query) {
  var data = {results: []}, i, j, s;
  for (i = 1; i < 5; i++) {
    s = "";
    for (j = 0; j < i; j++) {s = s + query.term;}
    data.results.push({id: query.term + i, text: s});
  }
  query.callback(data);
}

【讨论】：

id 和 text 为我修复了它。谢谢！