(X-Editable) with (Select2 Tags) 不起作用，无法填充当前标签并跟踪和 added/removed 标签

Question

我正在尝试让带有 Select2 Tags 选项的 X-Editable 插件工作，我可以从我从服务器检索的数组对象中填充一些标签。

HTML

<div class="container">
    <table>
    <tr>
        <td>Name:</td>
        <td><div class="editable" data-asset="name"></div></td>
    </tr>
  <tr><td>Description</td><td><div class="editable" data-type="textarea" data-asset="description"></div></td></tr>
    <tr>
        <td>Tags:</td>
        <td>
            <div class="editable" data-asset="tags"></div>
            <button id="asset-button-tags-edit">Edit Tags</button>
        </td>
    </tr>
    </table>
</div>

JavaScript:

data = {
///...

  // current tags <- user can add and remove tags
    assetTags: [{
  '778': 'Racer',
  '456': 'BMW',
  '112': 'M3'
  }],

  // available tags <- user could only add tags from this list
    availableTags: [{
  '345': 'Winner',
  '789': 'Boy Racer',
  '101': 'Boy Racer',
  '009': 'Orange',
  '778': 'Racer',
  '456': 'BMW',
  '112': 'M3'
  }]

///...
}

$assetTags.editable({ 
    type: 'select2',
    pk: 1,
    autotext : 'always',
    source : getSource(),
    value : data.assetTags,
    emptytext: 'None',
    display: function(value, sourceData) {
       var html = data.assetTags,
           checked = $.fn.editableutils.itemsByValue(data.assetTags, data.assetTags, 'id');
       if(checked.length) {
           $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
           $(this).html(html.join(', '));
       }
       else {
           $(this).empty(); 
       }
    },
    select2: {
        multiple : true,
        initSelection : data.assetTags
    }
});

它应该如何工作：

用户只能向 data.assetTags 添加标签，这些标签位于 data.availableTags
用户可以删除 data.assetTags

所以无论做了什么更改，它都应该与 data.assetTags 同步，这就是我将发送回服务器的内容。

这是我目前取得的成绩，不知道哪里错了！希望有人可以帮助我:)

演示：http://jsfiddle.net/Farzad/20e6e1os/10/

非常感谢

Answer 1

也许您应该使用 x-editable 在多个标签中遵循此结构：https://jsfiddle.net/emo_noel10/dLeumnpg/25/ and http://jsfiddle.net/dplanella/N6bQE/36/.

尝试使用 div class 更改 $assetsTag，即：$('.editable').editable({});。并尝试用 span 标签更改 div 标签。

我是 x-editable 库的新手，只是分享我的经验。让我知道它是否有效。顺便说一句，请在这里回答：（How to save data and to add new tag and its data from select 2 multiple select tag) if you have an idea on how to add new tags in this link https://jsfiddle.net/emo_noel10/dLeumnpg/25/。谢谢。

(X-Editable) with (Select2 Tags) 不起作用，无法填充当前标签并跟踪和 added/removed 标签

(X-Editable) with (Select2 Tags) not working, Can't populate the current tags and keep track of and added/removed tags

javascript

jquery

x-editable

select2