prototype.js を使ったインクリメンタル・オート Selecter クラス

prototype.js を以前から使ってみたいと思っていたのですが、なかなか時間がとれなくて触ることができませんでしたが、必要に迫られて JavaScript のコーディングをすることになりました。良い機会なので prototype.js を使ってみることにしました。

今回の要件（前提条件）として、

  • リストボックス・リストボックス内のデータが数千件とあまりにも多くなってしまい、選択するにも何処に目的のデータがあるかわからないのを改善したい。
  • Ajax とかを使ってインクリメンタル検索を実装する暇もない。（他人が作った CGI をリファクタリングしたくない。）
  • どうせなら、CGI は改良せず html-template の修正だけですませたい。
  • 社内ツールってことで、ブラウザは IE と FireFox に限定できるので prototype.js とかで Web 2.0 的な記述OK。
といったところ。そこで、JavaScript でインクリメンタル検索に似た機能ってことで、「フィルターの入力文字に合わせて自動的に Select の選択箇所を移動させる。」ってのを Web 2.0 ちっく？に実装してみました。
- スポンサーリンク -

IncAutoSelecter Class の設計

  • prototype.js ベースで再利用可能なクラス設計
  • new IncAutoSelecter("id値" もしくは "TagName値"); で、特定の Element に限定したインスタンスを生成
  • new IncAutoSelecter(); で html 内の自動的に全ての SelectElement を対象としてインスタンスを生成
  • フィルター入力のテキストボックスは JacaScript のクラス側で自動的に生成
  • テキストボックスはコンボボックス・リストボックスの横に表示されるルーペ画像のクリックでを表示・非表示可能
  • 対象の特定には、Selectelement の id 属性を使用。id 属性がなければ、name 属性から id 属性を生成
  • インクリメンタル検索のマッチ対象データは、SelectElement の innerHTML とする ※つまり、<option>hogrhoge</option> の hogehoge が検索データに使われる
  • 大文字・小文字を区別せずにマッチング可能

    • IncAutoSelecter Class の使い方

    </form> の後に <script src="prototype.js" type="text/javascript"></script>　 <script src="incautoselecter.js" type="text/javascript"></script>　 <script type="text/javascript">　 new IncAutoSelecter(); // もしくは new IncAutoSelecter('hogehoge'); </script> と記述するだけ。

    IncAutoSelecter Class の使い方の例

    既存の html に挿入するのは bold 文字の部分のみ。下記例は全 SelectElement が対象のモード。 
    <html><head>
</head>
<body><form>
<select name="elem1" id="elem1">
<option>
<option value=1>aaa</option>
<option value=2>bbb</option>
<option value=3>ccc</option>
<option value=4>ddd</option>
</select>

<select name="elem2">
<option>
<option value=1>aaa</option>
<option value=2>bbb</option>
<option value=3>ccc</option>
<option value=4>ddd</option>
</select>

</form>

<script src="prototype.js" type="text/javascript"></script>
<script src="incautoselecter.js" type="text/javascript"></script>
<script type="text/javascript">
new IncAutoSelecter();
</script>
</body>
</html>

    実際の動作イメージ
    incautoselecter.jpg

    実際のサンプルはこんな感じ・・・

    IncAutoSelecter Class のソース

    incautoselecter.js のソース（右クリックで保存で） 画像とかサンプル一式（右クリックで保存で）

    例えばベンダーが作った CGI や JavaBean の内部を触るのはちょっと・・・と言う場合でも、html レベルで JavaScript のタグを数行加えるだけでインクリメンタル検索に近いことを実装することができます。古いアプリケーションの命をもう少し長らえさせたいって場合や、予想以上にコンボボックス内のデータがたまってしまったって場合にお手軽に使って頂ければと思います。

    ※初めて prototype.js を使って OO-Stype の JavaScript を組んだこともあり怪しげな事をしているかもしれませんが、そこら辺はアドバイスとか頂ければ幸いです。

    - スポンサーリンク -

    関連する記事＆スポンサーリンク