X-Editable tags example

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/css/bootstrap-editable.css">
<script src="http://vitalets.github.com/x-editable/assets/x-editable/bootstrap-editable/js/bootstrap-editable.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/select2/select2.js"></script>
<link rel="stylesheet" href="http://vitalets.github.com/x-editable/assets/select2/select2.css">
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.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=""><i class="icon-pencil"></i></a>
    </div>
</div>

CSS

#container {
     margin: 100px 10px;
}

JavaScript

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

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

$('.tags').editable({
    select2: {
        tags: ['cake', 'cookies'],
        tokenSeparators: [",", " "]
    }
});