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://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="https://vitalets.github.io/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.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;
}
.select2-container-multi .select2-choices .select2-search-choice {
  padding: 3px 5px 3px 18px;
  margin: 3px 0 3px 5px;
  position: relative;
  line-height: 13px;
  color: #333;
  cursor: default;
  border: 1px solid #AAA;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px #FFF inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 2px #FFF inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #E4E4E4;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #F4F4F4), color-stop(50%, #F0F0F0), color-stop(52%, #E8E8E8), color-stop(100%, #EEE));
  background-image: -webkit-linear-gradient(top, #F4F4F4 20%, #F0F0F0 50%, #E8E8E8 52%, #EEE 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
.select2-container-multi .select2-choices li {
  float: left;
  list-style: none;
}
.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
});