2

是否有针对 ui 组件的语义 ui 即用型解决方案，它结合了文本输入和预定义值的下拉菜单。示例是“下拉菜单可能看起来漂浮在元素下方”（http://semantic-ui.com/modules/dropdown.html），但它是文本输入而不是按钮。

4

1 回答 1

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>

带有 contenteditable 的新修改代码：

  <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>

注意第 3 行以多种方式修改。我删除了“默认”类，因为我不想要灰色占位符效果。我添加了 contenteditable 属性。而且我还删除了占位符文本。

现在您需要一个处理该 div 的 onChange 事件或表单的提交按钮单击事件的 JQuery 事件处理程序，以便您可以将 div 的值复制到隐藏的文本输入。

Datalist 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>
于 2014-12-16T07:30:29.620 回答