検索演算子のヒント
メール検索で from: is: before: を打ち始めると演算子のヒントが出て、確定するとチップ（トークン）になる。トークンと本文の語を組み合わせて一覧が絞られる。Gmail 型。
プレビュー
入力
操作実際に入力して試せます。
デザインの要点
- 演算子は覚えてもらうものではなく、打ち始めたら教えるもの。「fr」で from: が出れば、初回から使える
- 確定した条件はチップにして入力欄から切り離す。文字列のままだと、どこまでが条件かを目で解析させることになる
- is: のように値が決まっている演算子は、コロンの後で値の候補を出す。自由入力を許すのは from: のような開いた値だけ
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="soh">
<div class="soh-field">
<div class="soh-box" id="soh-box">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
<div class="soh-tokens" id="soh-tokens"></div>
<input id="soh-q" class="soh-input" type="text" placeholder="メールを検索（from: is: before: が使えます）" autocomplete="off" aria-controls="soh-hints" aria-expanded="false" aria-describedby="soh-help">
</div>
<ul id="soh-hints" class="soh-hints" role="listbox" aria-label="演算子の候補" hidden></ul>
</div>
<p id="soh-help" class="soh-help">空白か Enter で確定してチップにします。Backspace で最後のチップを外せます</p>
<p class="soh-count" id="soh-count" aria-live="polite"></p>
<ul class="soh-list" id="soh-list" aria-label="メール"></ul>
</div>