動作確認
未入力の状態
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>