htmlのセレクト要素をインクリメンタルサーチする bookmarklet

Webのフォームで非常に多くの選択肢があるプルダウンリスト、またはリストボックスから目的のアイテムを選択するのは非常に面倒です。
残念ながら私の会社のとある社内システムでoption数が800を超えるリストから選択しなければいけない部分があり、非常に苦痛です。

エクスプローラ や Finder のファイルを選択するのと同じく、表示されているテキストの先頭数文字を入力することでその文字列から始まるリストにジャンプしてくれるブラウザもあります。
しかし、
・テキストの途中の文字列で絞り込めない
・リストが辞書順に並んでいないと似ているアイテムを選択するのが難しい
・タイプが遅いとうまく絞り込めない
・Safari にはそもそもそんな機能がない
・日本語表示のアイテムにはジャンプできない
という問題があります。

そこでリストをインクリメンタルサーチできるテキストボックスをダイナミックに追加してくれる bookmarklet を作ってみました。


動作をわかりやすく(?)マンガに。

あらかじめ下のリンクをブックマークしておき、目的のフォームを表示した状態でブックマークをクリックすると絞り込みボックスが現れます。
なお、絞り込みを行うと選択状態が解けてしまうので注意してください。





長さ制限を超えているため IE6 では使えません。IE7では長さ制限には引っかかっていないはずですがテストしていません。
Safari, Firefox でのみ動作確認しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

%d人のブロガーが「いいね」をつけました。