ブラウザでコンボボックスを使う場合、件数が1万件以上あると動作がすごく遅くなります。
なのでユーザーの入力によって選択肢を限定する方法を採ります。
そこで使えるのがselect2というjavascriptライブラリです。
select2を使う
htmlヘッダに以下を追加します。
|
1 2 |
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> |
オートコンプリートを使用するselectタグに適当なクラス名をセットします。
|
1 |
<select class="form-control select" style="width: 200px"></select> |
クラス名をselectとしました。
設定したクラスにjavascriptでselect2を反映します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$('.select').select2({ width: 'resolve', ajax : { url : './shohin.jsp', dataType : 'json', processResults : function(data) { return { results : $.map(data, function(item) { return { text : item.name, id : item.id } }) }; } } }); |
urlには選択肢を絞り込むプログラムを指定します。
今回はJavaを使いますのでjspを指定しました。
JSONを返す
サーバー側は受け取ったパラメータを元に選択肢を絞り込み、JSON形式でデータを返します。
今回はjsp+DBUtilsでレスポンスデータを作成します。
ユーザーが入力した値は「q」というパラメータで渡ってきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<% // データソースの取得。各々実装してください。 DataSource ds = Database.getDataSource(); QueryRunner qr = new QueryRunner(ds); ResultSetHandler rsh = new MapListHandler(); List<Map> list = (List<Map>) qr.query( "select * from SHOHINMST where DEL = 0 and SHOHINCD like ? order by SHOHINCD", rsh, new Object[] { request.getParameter("q") + "%" }); StringBuilder s = new StringBuilder(); s.append("["); for (Map m : list) { s.append("{\"name\":"); s.append("\""); s.append(m.get("SHOHINCD")); s.append(":"); s.append(m.get("SHOHINNAME")); s.append("\",\"id\":"); s.append(m.get("SHOHINCD")); s.append("},"); } %> <%=s.toString().substring(0, s.toString().length() - 1) + "]"%> |
実際に返されるデータは以下のような形式になります。
|
1 |
[{"name":"122:商品A","id":122},{"name":"1222:商品B","id":1222},{"name":"12290:商品X","id":12290}] |
これでコンボボックスのオートコンプリート化が完成です。
スポンサーサイト
アフィリエイトはエーハチネット
ドメイン取るならお名前.com
