Picker

送信する値は、見えない標準の select が name で送ります。上の検索欄は候補を探すためだけのもので、送信しません。options の value が空白だけの候補と、重なった値の二つ目以降は出しません。

検索欄に移ると候補の一覧を開きます。打った文字で候補の名前を絞り込み、全角と半角、大文字と小文字は区別しません。選べる候補が一つも無い時は「一致する候補はありません。」と出します。候補を選ぶと検索欄を空にして一覧を閉じ、検索欄へフォーカスを戻します。

候補の一覧は検索欄のすぐ下に、選んだ値と補足の上へ重ねて開く白いパネル（1px #bbbbbb の枠、角丸5px、柔らかい影）で、12pxの候補の行を隙間なく並べます。ホバーした候補とキーボードで移った候補は、角の無い淡い青（#ddeefe）に黒い文字で塗ります。ピルで囲みません。選び済みの候補は太字、選べない候補は灰色の文字にします。

選んだ候補は、検索欄の下に解除の操作付きの Tag で並べます。一つを選ぶ時は、別の候補を選ぶと置き換え、選び済みの候補を選び直しても変更として扱いません。multiple では選ぶたびに加え、同じ候補をもう一度選ぶと外します。どちらも Tag の解除の操作で外せます。

required で未選択のまま送信すると、検索欄へフォーカスを移して「候補を選択してください。」と出します。フォームのリセットでは標準の select の初期値に戻し、表示も合わせます。

ComboboxController を combobox、PickerController を picker として登録します。選択を変えると picker:change を出し、標準の select でも input・change を発火します。Tag の見た目に components/tag.css、候補の一覧に components/field.css も読み込みます。

候補を取得し直した時は、PickerController の replaceOptions(options) へ新しい候補を渡します。新しい候補にも残る選択は保ち、選択が変わった時は標準の select で input・change を発火します。候補の取得と通信は利用側が行います。

JavaScriptが無い時は、検索欄を出さず、標準の select をそのまま使います。一つを選ぶ時は先頭に「選択してください」の空の選択肢を置きます。