如何将 Fuel UX 药盒用作 HTML 表单中的元素？

Question

我正在使用 Fuel UX 药盒组件，我想让它成为我必须提交的表单的一部分。不幸的是，该控件不包含任何要提交的表单元素，这使得它很酷但无用（对我来说）。我在 HTML 代码中添加了一个 Input::Hidden 元素，但现在我必须强制碉堡组件与我不知道该怎么做的表单元素一起工作。

 <div class="form-group">
    <label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
    <div class="col-sm-8">
     <div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
      <ul class="clearfix pill-group">
        <li class="pillbox-input-wrap btn-group">
          <a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
          <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
          <button type="button" class="dropdown-toggle sr-only">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
        </li>
      </ul>
      <input type="hidden" name="{name}" id="{name}" value="">
    </div>
  </div>

我真正需要的是在列表中添加或删除新标签时使用 JavaScript 更新 Input::Hidden 元素。

哦，JavaScript 不是我的强项。

Fuel UX 组件具有 add 和 remove 新标签的事件，可能必须使用，但正如我所提到的 - 不知道如何实现它。

如果您有任何建议，请提供帮助，或者如果您对如何使用 HTML 表单实现 Pillbox 组件有任何其他建议 - 我愿意接受新的想法。

谢谢。

Answer 1

您可以使用Pillbox events 通过items method 捕获药盒数据。

HTML：

<div class="pillbox" id="myPillbox1">
  <ul class="clearfix pill-group">
    <li class="pillbox-input-wrap btn-group">
      <a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
      <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
      <button type="button" class="dropdown-toggle sr-only">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
    </li>
  </ul>
</div>

<input id="pillboxInput" type="text" value="">

Javascript：

$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() {
    $('#pillboxInput').val( JSON.stringify( $('#myPillbox1').pillbox('items') )  );
});

此示例输出到 JSON 对象结构，因为药盒控件支持每个药丸的文本和值属性（以及更多具有数据属性的属性）。