如何通过Ajax请求将Select2与JSON一起使用？

Z时代
2024-01-10
分类：问答

我的Select2 3.4.5无法使用JSON数据。

这是我在HTML上的输入框：

<input class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />

…还有我的JavaScript

$(".itemSearch").select2({
    placeholder: "Search for an Item",
    minimumInputLength: 2,
    ajax: {
        url: "/api/productSearch",
        dataType: 'json',
        quietMillis: 100,
        data: function (term, page) {
            return {
                option: term
            };
        },
        results: function (data, page) {
            var more = (page * 10) < data.total;
            return {
                results: data.itemName,
                more: more
            };
        }
    },
    formatResult: function (data, term) {
        return data;
    },
    formatSelection: function (data) {
        return data;
    },
    dropdownCssClass: "bigdrop",
    escapeMarkup: function (m) {
        return m;
    }
});

我使用Laravel 4制作了一个API，每当在文本框中键入任何内容时，该API都会返回一个值。

如果在文本框中键入“ test”，则结果如下：

[{"itemName":"Test item no. 1","id":5},
{"itemName":"Test item no. 2","id":6},
{"itemName":"Test item no. 3","id":7},
{"itemName":"Test item no. 4","id":8},
{"itemName":"Test item no. 5","id":9},
{"itemName":"Test item no. 6","id":10},
{"itemName":"Test item no. 7","id":11}]

我无法将结果添加到我的Select2下拉列表中。我认为formatSelection并且formatResult正在引起问题，因为我不知道应该在上面放置什么参数。我不知道从何处获取容器，对象和查询等参数以及应返回的值，还是我的JSON响应错误？

回答：

这里有一个例子

$("#profiles-thread").select2({
    minimumInputLength: 2,
    tags: [],
    ajax: {
        url: URL,
        dataType: 'json',
        type: "GET",
        quietMillis: 50,
        data: function (term) {
            return {
                term: term
            };
        },
        results: function (data) {
            return {
                results: $.map(data, function (item) {
                    return {
                        text: item.completeName,
                        slug: item.slug,
                        id: item.id
                    }
                })
            };
        }
    }
});