在Select2中加載遠程數據的另一種方法

Question

我正在嘗試從一個php頁面使用json來獲取遠程信息，即JSON數據：

[{"id":"0","name":"ABC"},{"id":"1","name":"DEF I"},{"id":"2","name":"GHI"}]

腳本是這樣的：

$(document).ready(function() {
    $('#test').select2({
        minimumInputLength: 1,
        placeholder: 'Search',
        ajax: {
        dataType: "json",
        url: "subject/data_json.php",
        data: function (term, page) {// page is the one-based page number tracked by Select2
            return {
                college: "ABC", //search term
                term: term
            };
        },
        type: 'GET',
            results: function (data) {
                return {results: data};
            }
        },
        formatResult: function(data) { 
            return "<div class='select2-user-result'>" + data.name + "</div>"; 
        },
        formatSelection: function(data) {
            return data.name;
        },
        initSelection : function (element, callback) {
            var elementText = $(element).attr('data-init-text');
            callback({"name":elementText});
        }
    });
});

它工作正常，但每當我輸入一個新字符進行搜索時，它總是讀取數據庫。 所以我決定使用另一種方式（第一次檢索所有數據並使用select2進行搜索）：

$(document).ready(function() {
    $("#test").select2({
        createSearchChoice:function(term, data) { 
        if ($(data).filter(function() { 
        return this.text.localeCompare(term)===0; }).length===0) {
        return {id:term, text:term};} 
    },
    multiple: false,
    data: [{"id":"0","text":"ABC"},{"id":"1","text":"DEF I"},{"id":"2","text":"GHI"}]
    });
});

但是問題是如何將請求傳遞給data_json.php並從中檢索數據？ 說

data: $.ajax({
            url: "subject/data_json.php",
            data: function (term, page) {// page is the one-based page number tracked by Select2
                return {
                    college: "ABC", //search term
                };
            }
            dataType: "json",
            success: function(data){
                return data
            }
        }

但是它不起作用，有人可以幫忙嗎？ 謝謝

Answer 1

您為什么離開原始代碼？

minimumInputLength: 1

增加此數量，將不會在鍵入的第一個字符上調用搜索。 例如，將其設置為3將確保在輸入第三個字符之后才進行ajax調用（因此不會查詢數據庫）。

Answer 2

如果我正確理解了您的問題，則可以讓data_json.php生成select2的選項，並且您希望一次加載所有選項，而不是每次用戶在搜索中輸入一個或多個字符時都讓select2運行ajax查詢。

這就是我在類似情況下解決問題的方式。 HTML：

<span id="mySelect"></span>

Javascript：

$(document).ready(function () {
  $.ajax('/path/to/data_json.php', {
    error: function (xhr, status, error) {
      console.log(error);
    },
    success: function (response, status, xhr) {
      $("#mySelect").select2({
        data: response
      });
    }
  });
});

我發現，如果您創建一個<select>元素而不是一個<span> ，則上述方法不起作用。