Question

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

Answer 1

ContentEditable解决方案：

尝试使用新的html5元素“contenteditable”。

e.g。原始标准语义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属性。我还删除了占位符文本。

现在你需要一个JQuery事件处理程序来处理div的onChange事件，或者表单的submit的按钮点击事件，这样你就可以将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>

结合文本输入和下拉列表的ui组件解决方案

1 个答案: