如何在表格单元格中实现标签

Question

使用Chosen JQuery插件，我可以在单个输入字段中放入多个标签。不幸的是，Chosen没有任何<tables>在其表格单元格中提供相同的功能。 假设我有一个简单的单列单细胞表：

<table>
  <tbody>
    <tr>
      <td ondblclick="onTdDoubleClick(this)" tabindex="-1">
      </td>
    </tr>
  </tbody>
</table>

<script>
  function onTdDoubleClick(elem){
    var element = $(elem);
    if (element.prop('contenteditable')=='true') { element.removeAttr("contenteditable"); deselect(element); }
    else { element.prop('contenteditable', true); element.focus(); }  
  }
</script>

当我双击单元格时，我希望单元格变成小部件，允许用户进行与此类似的多项选择：

实现此功能的最佳和最简单的方法是什么？

以下是用于创建我发布的图片上显示的小部件的Chosen代码段作为示例：

<link rel="stylesheet" href="chosen.css">

<style type="text/css" media="all"> .chosen-rtl .chosen-drop {left: -9000px;} </style>

<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" style="width:350px;" tabindex="18" id="multiple-label-example">
  <option value=""></option>
  <option>American Black Bear</option>
  <option>Asiatic Black Bear</option>
  <option>Brown Bear</option>
  <option selected>Giant Panda</option>
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
<script src="chosen.jquery.js" type="text/javascript"></script> 

<script type="text/javascript">
  var config = {
    '.chosen-select'           : {},
    '.chosen-select-deselect'  : {allow_single_deselect:true},
    '.chosen-select-no-single' : {disable_search_threshold:10},
    '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
    '.chosen-select-width'     : {width:"95%"}
  }
  for (var selector in config) {
    $(selector).chosen(config[selector]);
  }
</script>