select2でAjaxオートコンプリート with Java

ブラウザでコンボボックスを使う場合、件数が1万件以上あると動作がすごく遅くなります。
なのでユーザーの入力によって選択肢を限定する方法を採ります。

そこで使えるのがselect2というjavascriptライブラリです。

select2を使う

htmlヘッダに以下を追加します。

オートコンプリートを使用するselectタグに適当なクラス名をセットします。

クラス名をselectとしました。

設定したクラスにjavascriptでselect2を反映します。

urlには選択肢を絞り込むプログラムを指定します。
今回はJavaを使いますのでjspを指定しました。

JSONを返す

サーバー側は受け取ったパラメータを元に選択肢を絞り込み、JSON形式でデータを返します。
今回はjsp+DBUtilsでレスポンスデータを作成します。
ユーザーが入力した値は「q」というパラメータで渡ってきます。

実際に返されるデータは以下のような形式になります。

これでコンボボックスのオートコンプリート化が完成です。



スポンサーサイト
Javaが使えるレンタルサーバー<1stRentalServer>
アフィリエイトはエーハチネット
ドメイン取るならお名前.com
The following two tabs change content below.
KG

KG

サーフィン、キャンプからプラモデル製作まで、多趣味なアラフォーです。システムエンジニアをやっています。Webデザインは専門外ですがwordpressにハマり中。WPカスタマイズや日常のことを書いていきたいと思います。

コメントを残す

メールアドレスが公開されることはありません。