【Salesforce】ある桁数まで入力したら自動で検索してほしい

5517 ワード
Salesforce Apex Visualforce Salesforce テキストリンク

動作確認

未入力の状態

4桁入れて自動検索した状態

実現方法

test.cls
public String name { get; set; }

public void getAccount(){
    this.targetAccList = [
        SELECT
            Id
            ,Name
        FROM Account
        WHERE
            Name = :name
    ];
}
test.js
function checkName(input) {
    // apex:actionFunctionタグで設定しているgetAccountメソッドを呼び出す
    if(input.value.length == 4){
        getAccount();
    }
}
test.page
<apex:form>
    <apex:actionFunction name="getAccount" action="{!getAccount}"/>
    <apex:pageBlock title="取引先検索">
        <apex:outputLabel value="取引先名" for="name"/>
        <!-- onkeyup属性を使用し、入力したらJavaScriptのcheckNameメソッドを呼び出します -->
        <apex:inputText id="name" value="{!name}" html-placeholder="取引先名" html-autofocus="true" onkeyup="checkName(this);"/>
    </apex:pageBlock>
    <apex:pageBlock>
        <table>
            <thead>
                <tr>
                    <th>取引先名</th>
                </tr>
            </thead>
            <apex:repeat value="{!targetAccList}" var="acc">
                <tbody>
                    <tr>
                        <td>
                            <apex:outputField value="{!acc.Name}"/>
                        </td>
                    </tr>
                </tbody>
            </apex:repeat>
        </table>
    </apex:pageBlock>
</apex:form>

参考リンク

apex:inputText

apex:actionFunction