Question

我已经尝试了很长时间才能将远程JSON文件作为选项导入到select2输入中，但没有任何成功。

我正在使用Select2的3.5.3版本，它由一个模块加载到Drupal中，所以我暂时还不熟悉它。

我应该说我对javascript和JSON的经验很少，虽然我花了几个小时来完成各种select2教程，虽然脚本将输入更改为select2字段，但我在搜索中输入的内容只返回一个字段错误，“加载失败”。

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

[

{
    "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输出格式，因为我将使用的真实文件是通过第三方（我无法访问，因此测试文件）并且不会更改。< / p>

这是我的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>

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

1 个答案: