使用X-editable jQuery库使用来自AJAX请求的数据填充Select2标记输入字段

我迫切需要JavaScript专家的一些帮助 . 我花了最近7个小时尝试了数百种代码组合，以获得基本的标签选择输入字段，以便与库 x-editable 和 select2 一起使用 .

我正在构建一个项目管理应用程序，它将在弹出窗口模式Div中显示项目任务数据 . 在任务模式中，所有任务字段都可以使用AJAX使用内嵌编辑功能进行编辑 .

我在用：

• jQuery编辑到位库名为 X-Editable - http://vitalets.github.io/x-editable/

• 下拉选择jQuery库 Select2 - https://select2.github.io/

• jQuery MockAjax 库允许模拟AJAX请求响应 . https://github.com/jakerella/jquery-mockjax

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

JSFiddle Demo: http://jsfiddle.net/jasondavis/Lusbqfhs/

The Goal:

• 在字段上设置 X-editable 和 Select2 ，以允许用户选择并输入 Tags 作为项目任务 .

• 从后端服务器获取可用的 Tag 条记录，这些记录将返回带有 Tag ID number 和 Tag Name 的JSON响应，并使用此数据填充 Selection2 输入字段以允许用户选择多个标记 .

• 允许用户也输入新标签，它也会将新标签发布并保存到后端！

• 当选择标签并单击保存按钮时，它会将所选标签列表ID ID编号保存回数据库 .

Problems:

现在，我在过去7小时内尝试了数百种选项和代码组合 . 我似乎无法使用这个基本功能，我发现的大多数示例似乎都不能正常工作！

在这个库的示例页面上 x-editable http://vitalets.github.io/x-editable/demo-plain.html?c=inline靠近表格中示例的底部，它说 Select2 (tags mode) 这个功能就是我需要的！我只是需要它从AJAX请求加载可用的标签，并且所有文档声称它可以完全没有问题地执行此操作！

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

它还链接到 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请求有什么问题？

如果有人可以帮助我开始工作，我真的可以帮助我，我会非常感激，我整晚都没有睡觉，甚至没有更接近工作的解决方案！请帮我！

谢谢