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

我非常需要JavaScript专家的帮助。在过去的7个小时里，我尝试了数百种代码组合，以获得一个基本的标记选择输入字段，用于库

x-editable

和

select2

我正在构建一个项目管理应用程序，该应用程序将在弹出模式Div中显示项目任务数据。在任务模式中，所有任务字段都将通过使用AJAX的在线就地编辑功能进行编辑

我正在使用：

• jQuery就地编辑库称为

  X-Editable

  -
• 下拉选择jQuery库

  选择2

  -
• jQuery

  MockAjax

  库允许模拟AJAX请求响应

我已经为这个StackOverflow问题设置了一个基本的JSFIDLE演示。我没有实际应用程序中的数千行代码，但是我有页面中包含的大部分第三部分库。原因是要确保它们都不会干扰结果

jsiddle演示：

目标：

• 在字段上设置

  X-editable

  和

  Select2

  ，以允许用户为项目任务选择并输入标记
• 从后端服务器获取可用的

  Tag

  记录，该记录将返回带有

  Tag ID number

  和

  Tag Name

  的JSON响应，并使用此数据填充

  Selection2

  输入字段，以允许用户选择多个标记
• 允许用户也输入一个新的标签，它将发布和保存新的标签到后端以及
• 当选择标记并单击保存按钮时，它会将所选标记列表bu ID编号保存回数据库

问题：

在过去的7个小时里，我已经尝试了数百种不同的选项和代码组合。我似乎无法让这个基本功能正常工作，我发现的大多数示例似乎不再正常工作了

在这个库的演示页面上，在表中示例底部附近的

x-editable

，上面写着Select2（标签模式），我需要这个功能！我只需要它从AJAX请求中加载可用的标记，所有文档都声称它可以毫无问题地完成这项工作

这是

X-Editable

中的文档部分，用于

Select2

字段-

它还链接到

Select2

文档，并声称Select2中的所有选项都可以在此处设置和使用-

我使用

MockAjax

库在JSFiddle之类的页面中模拟AJAX响应进行测试。在我的JSFIDLE演示中，我设置了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'}
        ];
    }
});

它们都应该返回一个模拟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请求出了什么问题

我真的需要一些帮助，如果有人能帮我把这件事做好，我会非常感激的，我整晚都没有睡觉，甚至还没有找到一个有效的解决办法！请帮帮我

---

谢谢

X-Editable使用Select2 3.5.2，它不直接使用jQuery.ajax（）。它有自己的ajax函数并调用jQuery.ajax（），如下所示：

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

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

这就是为什么

$.mockjax（{url:'/getTaskTags'…

不起作用

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

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

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 };
            }
        },