无法将远程数据子加载到 select2

Question

我已经尝试了很多小时来获取一个远程 JSON 文件作为选项导入到 select2 输入中，但没有任何成功。

我使用的是 Select2 的 3.5.3 版本，它通过一个模块加载到 Drupal 中，所以我暂时还是坚持使用它。

我应该说我对 javascript 和 JSON 的经验很少，尽管我花了几个小时浏览各种 select2 教程，虽然脚本将输入更改为 select2 字段，但无论我在搜索中键入什么都只会返回一个字段错误，“加载失败”。

控制台中没有消息，所以我不知道哪里出错了。我怀疑它可能是 JSON 文件，为此我使用的是手动创建的 JSON 文件，我只是将其上传到名为 test.json 的 Web 服务器。这是其中的代码：

[

{
    "entry_id": "45117",
    "url": "http://www.example.com",
    "title": "Title text 1",
    "count": "2",

},

{
    "entry_id": "45096",
    "url": "http://www.example.com",
    "title": "Title text 2",
    "count": "5",
}
]

我希望在 select2 下拉列表中显示“title”字段，并在提交表单时将“entry_id”字段存储为值。我相信这就是 select2 的工作原理，但是字段名称为“id”和“text”，所以我需要我的 JS 来映射我的字段。

我无法更改 JSON 输出格式，因为我将使用的真实世界文件是通过第三方（我还无权访问，因此是测试文件）并且无法更改。

这是我的 JS：

$("#myfieldid").select2({
minimumInputLength: 2,
tags: [],
ajax: {
    url: "http://mydomain.uk/test.json",
    dataType: 'json',
    type: "GET",
    quietMillis: 50,
    data: function (term) {
        return {
            term: term
        };
    },
    results: function (data) {
        return {
            results: $.map(data, function (item) {
                return {
                    text: item.title,
                    id: item.entry_id
                }
            })
        };
    }
}
});

这是我的 html：

<input type="text" id="myfieldid" name="myfieldname" value="" size="60" maxlength="255" tabindex="-1" style="display: none;">

为这篇冗长的帖子道歉，我真的被困在这里了，我完全期望一切都可以从我拥有的代码中运行，所以我的想法是它是 JSON 文件，以太格式或它的生成方式导致问题。

Answer 1

我查看了您的代码，发现了几个问题。

1) 您的 html 中需要有一个 <select> 元素而不是 <input>。

2) 您提供的示例 JSON 有一些额外的逗号（在 count 字段之后）。测试时，由于这些逗号，Chrome 拒绝加载此数据。你确定你的实际数据也有这些逗号吗？如果是这样，可能会有解决方法，但现在我将假设您的真实 JSON 实际上格式正确。

此外，我会将您的 JSON 数据加载到一个变量中，然后将其传递给 select2，而不是让 select2 执行 ajax 调用。否则，该库将在搜索字段中的每次击键时向服务器查询 json 文件，因为这实际上是用于服务器端搜索/过滤。

结果可能如下所示：

<!-- various HTML elements -->
<select id="myfieldid" name="myfieldname" tabindex="-1">
<!-- various HTML elements -->

<script>
$(document).ready(function() {
  $.ajax({
    async: true,
    url: "data.json",
    dataType: "json",
    error: function (jqXhr, status, error) {
      alert("Error loading data!");
    },
    success: function (data) {
      data = $.map(data, function (item) {
        return {
          text: item.title,
          id: item.entry_id
        };
      });
      $("#myfieldid").select2({
        minimumInputLength: 2,
        data: data
      });
    }
  });
});
</script>