X-Editable tags example

HTML

<script src="//apollowebstudio.com/labs/js/sugarcrm-pm/jquery.mockjax.js"></script>
<script src="https://cdn.rawgit.com/select2/select2/master/dist/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/select2/select2/master/dist/css/select2.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css">
<script src="https://vitalets.github.io/x-editable/assets/poshytip/jquery.poshytip.js"></script>
<script src="https://vitalets.github.io/x-editable/assets/x-editable/jquery-editable/js/jquery-editable-poshytip.js"></script>
<h4>X-editable: tags custom display </h4>

<div id="container" class="row">
    <div class="controls controls-row">                        
        <span class="tags" id="tags-editable-1"
            data-toggle="manual" data-type="select2" data-pk="1"
            data-value="apples,oranges,pie" data-original-title="Enter tags"></span>
        <a href="#" id="tags-edit-1" data-editable="tags-editable-1" class="">Edit<i class="icon-pencil"></i></a>
    </div>
</div>

CSS

#container {
     margin: 100px 10px;
}
.label {
    border-radius: 4px;
  display: inline-block;
  padding: 2px 4px;
  font-size: 11.844px;
  font-weight: bold;
  line-height: 14px;
  color: #FFF;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999;
}

JavaScript

var taskAssignedUserDataArray = [
    {
        id: 'apples',
        text: 'Jason Davis'
    },
    {
        id: 'oranges',
        text: 'User 2'
    },
    {
        id: 'pie',
        text: 'User 3'
    },
    {
        id: 3,
        text: 'User 4'
    },
    {
        id: 4,
        text: 'User 5'
    }
];

$.fn.editable.defaults.mode = 'popover';

$('.tags').editable({
    placement: 'right',
    source: taskAssignedUserDataArray,
    select2: {
        multiple: true,
        width: "200px",
        placeholder: 'Select Assigned User',
        separator: ','
    },
    display: function(value) {
        var output = [];
        
        if (!$.isArray(value)) {
            value = value.split(',');
        }
        
        $.each(value,function(i){
           // value[i] needs to have its HTML stripped, as every time it's read, it contains
           // the HTML markup. If we don't strip it first, markup will recursively be added
           // every time we open the edit widget and submit new values.
           output.push("<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>");
        });
        
        $(this).html(output.join(" "));
    }
});

$('.tag').on('shown', function() {
    console.log('tags shown');
    var editable = $(this).data('editable');
    value = editable.value;
    $.each(value,function(i){
       value[i] = $('<p>jjjjj' + value[i] + '</p>').text();
    });
});

$('[id^="tags-edit-"]').click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    $('#' + $(this).data('editable') ).editable('toggle');
});

$.mockjax({
    url: '/post',
    status: 200,
    responseTime: 200
});