X-Editable tags example

by Jason Davis

HTML

<script src="//apollowebstudio.com/labs/js/sugarcrm-pm/jquery.mockjax.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jquery-editable/css/jquery-editable.css">
<script src="//vitalets.github.io/x-editable/assets/poshytip/jquery.poshytip.js"></script>
<script src="//vitalets.github.com/x-editable/assets/x-editable/jquery-editable/js/jquery-editable-poshytip.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">
<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: 0,
                text: 'Jason Davis'
            },
            {
                id: 1,
                text: 'User 2'
            },
            {
                id: 2,
                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: {
        //tags: ['cake', 'cookies'],
        multiple: true,
        tokenSeparators: [",", " "],
        width: 202,
        placeholder: 'Select Assigned User',
        allowClear: true,
    },
    display: function(value) {
        $.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.
           value[i] = "<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
        });
        $(this).html(value.join(" "));
    }
});

$('.tag').on('shown', function() {
    var editable = $(this).data('editable');
    value = editable.value;
    $.each(value,function(i){
       alert(value[i]);
       value[i] = $('<p>jjjjj' + value[i] + '</p>').text();
       //value[i].replace(/(<([^>]+)>)/ig,"");
    });
});

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

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