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

Question

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

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

我正在使用：

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

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

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

目标：

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

问题：

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

在此库的演示页面上，x-editablehttp://vitalets.github.io/x-editable/demo-plain.html?c=inline 靠近表中示例的底部，其中显示 Select2（标签模式），我需要该功能！我只需要它从 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'}
        ];
    }
});

他们都应该为我的选择列表返回一个模拟 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 使用不直接使用 jQuery.ajax() 的 Select2 3.5.2。它有自己的 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 };
            }
        },