無法將遠程數據子加載到select2中

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下拉列表中顯示“標題”字段，並在提交表單時將“ 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>