━目次━





今日は技術ネタです。

テーマとしては以下の感じ。

Spring Framework(実際はTERASOLUNAというNTTデータがSpringに手を加えたもの)
HTML/JavaScript
テキストボックスに「?」と入力してフォーカスアウトした際、ajaxでDBからデータを取得
取得結果一覧からセレクトボックスを作成し、テキストボックスをセレクトボックスに変える



じゃけぇじゃけぇ

「?」を入力の部分をボタン押下とかラジオボタン切替とか色々なイベントに読み替えたら応用が効くから是非活用してね

ajax実行部分

まずはフォーカスアウトを検知→ajaxを実行までのソースです。


一般的なajax実行の記述です。

まずはここまでで「?」が入力された場合、controllerファイルを呼び出すことが出来ます。

データ取得部分(controllerファイル)

次にajaxで呼ばれたcontrollerファイルのソースです。

モデルやサービスは適当なものが存在するものとします。

この例ではフォーム内の”abc“というnameで受け取った値をキーに検索し、取得した情報の”listItem“という項目をセレクトボックスに設定します。

セレクトボックス作成部分

返却されたListからセレクトボックスを生成します。

先程のajax呼出部のsuccess:function内に記述していきます。


返却値をforEachでまわすことでvalueに値が入ります。

forEach内でcreateElementで作成したoptionに値を設定し、セレクトボックスのIDを指定し、appendChildすることで要素を作成します。

最後に、非表示にしていたセレクトボックス要素を表示し、テキストボックスを非表示にすることであたかもテキストボックスがセレクトボックスに変わったようにみえるというわけです。

まとめ

まとめるとこんな感じです。(HTML部にはintra-martのタグを使用)

【sample.jsp】


【sampleController.java】

さいごに

じゃけぇじゃけぇ

因みに何度もセレクトボックスの値を設定し直す場合は、↓のようにセレクトボックスの内容を初期化しないとどんどん増えていくから気を付けてね~


それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-