<< Parallels Virtual Appliances Directory | Home | SQL Server メモ - テーブル名一覧を取得する >>

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

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

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

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


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

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

Option Filter <-クリックすると動作を確認できます(RSSリーダ上では不可)







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



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

面白いことが出来るもんだねぇ。

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

社内システムでンガー!となってウゲー!と作ってしまいました。まぁ、良ければ使ってください。

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

凄い便利ですね! 画面系のデモを作る機会が有れば活用させて頂きます。

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

どうぞどうぞ!bookmarkletじゃなくて最初から組み込んじゃってください!

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

面白い Commic Life の使い方ですね。次のトレーニングで使ってみようかなー

コメント追加 トラックバック送信