visualforceで候補リストを作ってみた

visualforceで候補リストを作ってみた

入力された文字列に一致する取引先を検索、候補リストを表示させる機能をvisualforceで作ってみました。 こんなイメージ

f:id:sweaty:20210130223653g:plain

ボタンを使う方法と、actionSupportを使う方法をそれぞれ試してみました。

ボタンを使う方法

visualforceはこんな感じ

<apex:outputPanel id="sample1">
    <apex:inputText value="{!inputParam1}" list="{!lists1}" size="50"/>
</apex:outputPanel>
<apex:commandButton value="候補を検索" action="{!getList1}" reRender="sample1" />

ボタンを押したら取引先を検索し、inputTextで指定したlistに対応する値へ取引先名を格納します。

public PageReference getList1() {
    // リストの初期化
    lists1 = new List<String>();

    // 入力文字を部分一致するように変換
    String searchWord = '%' + inputParam1 + '%';

    // 取引先を検索
    List<Account> accList = new List<Account>();
    accList = [SELECT Id, Name FROM Account WHERE Name LIKE :searchWord];

    // 検索結果を文字列のリストに格納
    if(accList.size() > 0) {
        for(Account a : accList) {
            lists1.add(a.Name);
        }
    }

    return null;
    
}

actionSupportを使う方法

visualforceはこんな感じ

<apex:outputPanel layout="block" id="sample2">
    <apex:inputText value="{!inputParam2}" list="{!lists2}" size="50">
        <apex:actionSupport action="{!getList2}" reRender="sample2" event="onchange" />
    </apex:inputText>
</apex:outputPanel>

Apexは変わらないですね。actionSupport内で指定したイベントに応じてApexを呼び出しています。

実際に使用する際には、エンターキーの処理をどうするかとか考慮する必要もありそうです。