semantic-ui - テキスト入力とドロップダウンを組み合わせたUIコンポーネントのソリューション

Question

テキスト入力と事前定義された値のドロップダウンを組み合わせた、UI コンポーネント用のすぐに使用できるセマンティック UI ソリューションはありますか。サンプルは「ドロップダウン メニューが要素の下に浮いているように見える」( http://semantic-ui.com/modules/dropdown.html ) ですが、ボタンではなくテキスト入力になります。

Answer 1

ContentEditable ソリューション:

新しい 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 の値を非表示のテキスト入力にコピーできるように、その div の onChange イベント、またはフォームの送信のボタン クリック イベントを処理する JQuery イベント ハンドラーが必要です。

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>