Scratch Notes.

Safariの<input type="search">のような、以前入力された履歴をプルダウンメニューから選択して再度入力できるテキストフィールドをどうやって作ろう、というエントリです。前回の記事に引き続き、まずはルック＆フィールの検討です。

プルダウンメニューと聞いてぱっと思い浮かぶselect要素は、この用途に限ってはいろいろな観点からちょっと使いにくいということが解りました。他の手を考えなければなりません。
大規模なサイトなどでページ上部のナビゲーションとしてプルダウンメニューを採用する場合、よく用いられるであろうリスト(<ul><li></li>...</ul>)はどうでしょうか。とりあえず見た目は深く考えずおおまかな構造のみ。

サンプル4。

リストを用いる利点としては、メニューとしての枠や各項目といった構造が明確に示せる、というのが大きいです。ユーザーにしてみればどうでもいいことですが、プログラミングする側から見てみるとこれはとても重要ですね。
サンプルではli要素内にaを配置して、それぞれのonClickを使ってテキストフィールドに文字列を流し込んでいます。ついでに右側の「×」をクリックすると内容をクリアできるように。
これじゃプルダウンメニューじゃないじゃん、って思われるかもしれませんがご心配なく。メニュー部分にposition: absoluteをかけてvisibility: hiddenにし、テキストフィールド左側の「▼」をクリックしたらvisibleにするようにすればそれっぽくなるはずです。

サンプル5。

CSSを工夫してMacOS Xっぽい見た目のメニューにしてみました。色やマージンを調整したり、opacityいじってちょっとだけ半透明にしたりして本物に似せてあります。あくまでこのへんはサンプルということにしといてください。
メニューの影は大きめの画像を用意して右下揃えで配置する常套手段。透過pngなのでIE6.0以前ではちょっとヘンですがそのへんはご愛嬌です。
フィールド左側の「▼」と右側の「×」も画像で表現しちゃいます。汎用性の観点から白背景以外にも馴染ませる必要があるのでこれも透過pngですが、IE6.0対策に透過gifも用意してアンダースコアハックで上書きしておきます。ちょっとジャギーが出ちゃいますがこれもご愛嬌で。
で、左側の「▼」、フィールド本体、右側の「×」の3ブロックそれぞれに背景イメージを設定すれば見た目を自由に変えられるようにしました。たとえばSafariの角丸検索フィールドにこだわるなら、虫眼鏡アイコン付きの左側の角丸と、フィールド上下のボーダー、「×」アイコン付きの右側角丸の画像を用意すればこんな感じに。ただしこれはテキストフィールドにborder-width: 0pxを指定していたりするので、それを無視するSafari2.0以前では正しく表示されません。フィールドをフォーカスされてもヘンなことになっちゃいます。どこかでブラウザ判別処理をかませてSafariは弾いておく(そのかわりtype="search"を仕込んでおく)べきですか。
もちろんSafari風角丸は極端な例ですが、組み込み先によってルック＆フィールを柔軟にカスタマイズできるようにしておいたほうが汎用性は高いはず。

さて、さしあたりプルダウンメニューとしては"Click - Move - Click"の操作しか受け付けない点(古くからのMacユーザーさんは"Down - Drag - Up"でメニューを操作する人が多い気がします)とか、メニュー外でクリックしてもメニューから抜けれない点とかいくつか制約はありますが、このへんはおいおい考えるとして(なにかよいアイデアありましたら教えてください)、とりあえずユーザー側のインターフェースは一段落です。履歴とか関係なく単純に省入力として用意した項目を入力させるだけの用途ならこのままでも使えちゃいますね。

次回はいよいよ履歴を保存、取得、出力するエンジン部分です。つづく。