使用X可编辑的jQuery库，使用来自AJAX请求的数据填充Select2 Tag输入字段

Question

我非常需要JavaScript专家的帮助。 在过去的7个小时中，我尝试了数百种代码组合，以获取基本的标签选择输入字段，以与库x-editable和select2 。

我正在构建一个Project Management应用程序，它将在弹出的Modal Div中显示Project Task数据。 在“任务模式”中，所有任务字段都可以使用AJAX进行内嵌在线编辑功能进行编辑。

我在用：

• 名为X-Editable的jQuery编辑就位库X-Editable : //vitalets.github.io/x-editable/
• 下拉选择jQuery库Select2 - https: Select2
• jQuery MockAjax库，用于模拟AJAX请求响应。 https://github.com/jakerella/jquery-mockjax

我已经设置了一个基本的JSFiddle演示，可以针对这个StackOverflow问题进行实验。 我没有来自实际应用程序的数千行代码，但是页面中确实包含了大部分正在使用的第三部分库。 原因是要确保它们都不干扰结果。

JSFiddle演示： http : //jsfiddle.net/jasondavis/Lusbqfhs/

目标：

• 在字段上设置X-editable和Select2 ，以允许用户选择并输入项目任务的标签 。
• 从后端服务器获取可用的Tag记录，该服务器将返回带有Tag ID number和Tag Name的JSON响应，并使用此数据填充Selection2输入字段，以允许用户选择多个标签。
• 允许用户也输入一个NEW标签，它也会发布新标签并将其保存到后端！
• 选择标签并单击“保存”按钮后，它将选择的标签和ID号列表保存回数据库。

问题：

现在，在过去的7个小时中，我尝试了数百种来自选项和代码组合的变体。 我似乎无法使该基本功能正常工作，并且我发现的大多数示例似乎不再正常工作！

在此演示库页面上，该库是x-editable http://vitalets.github.io/x-editable/demo-plain.html?c=inline ，位于表中示例底部靠近Select2（标记模式）的位置该功能正是我所需要的！ 我只需要它从AJAX请求中加载可用的标签，所有文档都声称它可以做到这一点没有任何问题！

这是X-Editable的Select2字段的“文档”部分Select2 : //vitalets.github.io/x-editable/docs.html#select2

它还链接到Select2文件，并声称在选择二所有的选项，可以设置和使用，以及设在这里- https://select2.github.io/options.html

我使用MockAjax库在诸如JSFiddle之类的页面中模拟AJAX响应进行测试。 在我的JSFiddle演示中，这里http://jsfiddle.net/jasondavis/Lusbqfhs/我设置了2个MockAjax响应。

$.mockjax({
    url: '/getTaskTags',
    responseTime: 400,
    response: function(settings) {
        this.responseText = [
            {id: 1, text: 'user1'},
            {id: 2, text: 'user2'},
            {id: 3, text: 'user3'},
            {id: 4, text: 'user4'},
            {id: 5, text: 'user5'},
            {id: 6, text: 'user6'}
        ];
    }
});

$.mockjax({
    url: '/getTaskTagById',
    responseTime: 400,
    response: function(settings) {
        this.responseText = [
            {id: 1, text: 'user1'},
            {id: 2, text: 'user2'},
            {id: 3, text: 'user3'},
            {id: 4, text: 'user4'},
            {id: 5, text: 'user5'},
            {id: 6, text: 'user6'}
        ];
    }
});

它们都应该返回一个Mock JSON字符串，供我的选择列表填充。

这是我的演示代码...

$(function(){

    //remote source (advanced)
    $('#task-tags').editable({
        mode: 'inline',
        select2: {
            width: '192px',
            placeholder: 'Select Country',
            allowClear: true,
            //minimumInputLength: 1,
            id: function (item) {
                return item.CountryId;
            },
            // Get list of Tags from AJAX request
            ajax: {
                url: '/getTaskTags',
                type: 'post',
                dataType: 'json',
                data: function (term, page) {
                    return { query: term };
                },
                results: function (data, page) {
                    return { results: data };
                }
            },
            formatResult: function (item) {
                return item.TagName;
            },
            formatSelection: function (item) {
                return item.TagName;
            },
            initSelection: function (element, callback) {
                return $.get('/getTaskTagById', { 
                    query: element.val()
                }, function (data) {
                    callback(data);
                });
            } 
        } 
    });


});

现在在演示中，当您单击字段以选择“标签”时，它只会保持“加载”状态，而不会得到结果。 从控制台看，我的MockAjax请求似乎不起作用，但是第二个请求正在起作用，因此我不确定我的AJAX请求有什么问题吗？

如果有人可以帮助我完成这项工作，我真的可以使用一些帮助，我将非常感激，我整夜没有睡觉，甚至无法找到一个可行的解决方案！ 请帮我！

谢谢

Answer 1

X-Editable使用Select2 3.5.2，它不直接使用jQuery.ajax（）。 它具有自己的ajax函数，并像这样调用jQuery.ajax（）：

transport = options.transport || $.fn.select2.ajaxDefaults.transport
...
handler = transport.call(self, params);

这就是为什么$.mockjax({url: '/getTaskTags'...不起作用。

要使其正常工作，您需要创建自己的传输功能，如下所示：

var transport = function (queryParams) {
    return $.ajax(queryParams);
};

并设置运输选项：

   ajax: {
            url: '/getTaskTags',
=> transport: transport,
            type: 'post',
            dataType: 'json',
            data: function (term, page) {
                return { query: term };
            },
            results: function (data, page) {
                return { results: data };
            }
        },