ui组件的解决方案，该组件结合了文本输入和下拉菜单

Question

是否有一个可用于ui组件的语义ui现成解决方案，该解决方案结合了文本输入和预定义值的下拉列表。示例是"下拉菜单可以显示为浮动在元素下方"(http://semantic-ui.com/modules/dropdown.html)，但它将是文本输入而不是按钮。

Answer 1

内容可编辑解决方案：

尝试使用新的html5元素"contenteditable"。

例如。原始标准语义UI代码：

  <div class="ui selection dropdown">
    <input type="hidden" name="gender">
    <div class="default text">gender</div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item" data-value="Male">Male</div>
      <div class="item" data-value="Female">Female</div>
    </div>
  </div>

内容可编辑的新修改代码：

  <div class="ui selection dropdown">
    <input type="hidden" name="gender">
    <div class="text" contenteditable="true"></div>
    <i class="dropdown icon"></i>
    <div class="menu">
      <div class="item" data-value="Male">Male</div>
      <div class="item" data-value="Female">Female</div>
    </div>
  </div>

请注意，第三行有多种修改方式。我删除了"默认"类，因为我不想要灰色占位符效果。我添加了contenteditable属性。我还删除了占位符文本。

现在，您需要一个JQuery事件处理程序来处理div的onChange事件，或者表单的submit的button click事件，这样您就可以将div的值复制到隐藏的文本输入中。

数据列表HTML5解决方案：

如果您严格不需要语义UI提供的下拉样式，例如选项分隔符，那么您可以使用：

<div class="ui input">
  <input list="browsers" type="text">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</div>