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将确保在输入第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>，我发现以上内容无效。

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

2 个答案: