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

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

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

我在用：

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

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请求加载可用的标签，并且所有文档声称它可以完全没有问题地执行此操作！

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

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

谢谢