検索演算子のヒント
メール検索で from: is: before: を打ち始めると演算子のヒントが出て、確定するとチップ（トークン）になる。トークンと本文の語を組み合わせて一覧が絞られる。Gmail 型。
プレビュー
入力
操作実際に入力して試せます。
仕様書
- 向く場面
- メール・Issue など from: is: で絞る高度な検索
- 演算子を覚えさせずに打ち始めで教えたい欄
- 確定した条件をチップに切り離したい入力
- 避ける場面
- 一般消費者向けの単純なキーワード検索
- 演算子が2つ未満（通常のフィルタで足りる）
- 構成要素
- 検索入力欄
- 条件チップ（×付き）
- 演算子ヒント
- 使い方の補助文
- 件数
- 結果リスト
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- 空
- キーボード
演算子を打つとヒント。↑↓ で候補移動、Enter で適用、Esc で閉じる（Tab は閉じて次の要素へ）。Space／Enter で確定しチップ化、空欄で Backspace で最後のチップを外す
- 支援技術
入力は role=combobox・aria-autocomplete=list・aria-expanded・aria-controls・aria-activedescendant・aria-describedby。ヒントは listbox／option。× は aria-label。件数は live
- 動き
なし
デザインの要点
- 演算子は覚えてもらうものではなく、打ち始めたら教えるもの。「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" role="combobox" aria-autocomplete="list" 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>