jQuery、長いドロップダウンリストをインクリメンタルにしぼりこむサンプル with migemoっぽいもの

説明

たくさんのアイテムの中からひとつ選びたいというケース。 対象の名前は知ってる。でも検索するのもだるい。 単なるドロップダウンだとどこにあるかわからなくて困る。 というケースにどうぞ。

ユーザビリティメモ: jsが無効な人は恩恵を受けられないので代替手段を何とかしたほうがいいんじゃないっすかね。

ついでにmigemoっぽい検索する機能もつけてみた。 入力されたローマ字を元に正規表現作って読みデータ(ひらがな)を検索するだけ。 ちょっとかしこいハイライト機能つき。

操作: 上下キーで移動、Enterで確定、ESC or 検索窓がフォーカス失うとキャンセル。

Windows XP上のOpera 9.64、Firefox 3.0.10、IE 7.0で動作確認。

サンプル

関連デモ: Javascriptでmigemo

ソース

あとjQuery1.3.2。

サンプルデータの出所

英語の名前
http://en.wikipedia.org/wiki/List_of_computer_scientists
日本語の名前
なんちゃって擬人情報で生成
駅名
日本全国駅名一覧