株式会社システムフォレスト

技術ブログ

Visualforceで候補検索リストをつくろう!

今年の春に新しい家族(猫)がやってきて猫中心の生活になりつつある今日この頃。冬は猫と炬燵で過そうと思い、炬燵を買ったが中に入るのは犬共ばかり。。

人吉オフィス 開発の濱田です。こんにちは。

さて、今回はVisualforceで候補検索リストを作ってみましたので、ご紹介します。

以前のブログでHTML5とJSONを使っての候補検索を紹介しましたが、あの手法では、変更が頻繁に行われるマスタ系のデータでは使い辛かったり、一部ブラウザだと候補が選択し辛いといった問題がありました。

今回はApexのリモートアクションとJavaScriptを使って、リアルタイムな候補検索を作っていきます。

利用シーンは、「とあるオブジェクトにある取引先への参照項目がルップアップだと使いづらいので、候補検索リストに。あと、名前・フリガナ・電話番号でも検索できるように。」

と依頼された場面を想定しています。

まずは、クラスのコーディング

 

まぁ、難しいところはありません。良くあるSOQL文です。

次に、Visualforce側です、長くなるので3つに分けます。まずはCSS。

 

最後にBody部

以上でコーディングは完了です。

本来ならこれにEscキー押下時の処理や、フォーカス離脱時の確定処理等が必要ですが、今回は割愛します。

では、出来上がりの画面を見てみましょう。こんな感じです。

これで表示されたリストから値を選択すると、仕入先名には名前、隠し項目にIdをセットします。

また、ルックアップのように、検索結果に対象が無い時は新規追加を行えるようにしたいといった場合は、JSのHTML作成時に追加することで可能です。

以上です、それではまた次回お会いしましょう。