在 Select2 中加载远程数据的另一种方法答案

【问题标题】：Another way to load remote data in Select2在 Select2 中加载远程数据的另一种方法
【发布时间】：2014-04-12 06:47:15
【问题描述】：

我正在尝试使用 json 从一个 php 页面获取远程，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
            }
        }

但它不起作用，有人可以帮忙吗？谢谢

【问题讨论】：

标签： javascript jquery json jquery-select2

【解决方案1】：

您为什么放弃原来的代码？

minimumInputLength: 1

增加此项，搜索将不会在输入的第一个字符上调用。例如，将其设置为 3 将确保在输入第 3 个字符之前不会进行 ajax 调用（因此不会查询数据库）。

【讨论】：

【解决方案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>，上述方法将不起作用。

【讨论】：