Visualforce – Get All Accounts Related to Name Written in Input field

To Achieve this Functionality, one needs to use Jquery.

In order to use Jquery , Upload Jquery Script as a Static resource in your Salesforce Organization and Use this Script in Visualforce Page.

In order to take understanding as how it works please refer to the following URL.

Here is the Controller and Visualforce Page.


<apex:page sidebar="false" controller="FindAccountRelated_To_Search_Ext" >
<apex:includeScript value="{!$Resource.JqueryScript}"/>

<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
Account Name : <input type="text" name="fname" id="SearchVal" />
</apex:pageBlockSection>

</apex:pageBlock>

<apex:pageBlock title="All Accounts" id="acc">

<apex:pageblockTable value="{!AllAccounts}" var="accs">

<apex:column value="{!accs.Id}" headervalue="Account Id"/>
<apex:column value="{!accs.Name}" headerValue="Account Name"/>
</apex:pageblockTable>

</apex:pageBlock>

<apex:actionFunction action="{!RelatedAccounts}" name="searchrecords" reRender="acc" >
<apex:param name="serchval" value="serchval" assignTo="{!AccName}"/>
</apex:actionFunction>
</apex:form>

<script type = "text/javascript"> 
 
 $("#SearchVal").keypress(function(){
 var serchval = $(this).val();
 searchrecords(serchval);
 }); 
 
 </script>
</apex:page>

 


public with sharing class FindAccountRelated_To_Search_Ext {

public String AccName {get;set;}
public List<Account> AccountList {get;set;}

public PageReference RelatedAccounts(){

return null;
}

public List<Account> getAllAccounts(){

AccountList = [Select ID,Name From Account Where Name LIKE : ('%'+AccName+'%') ];
return AccountList;
}

}

Some points which you should know for this Visualforce Page.

1 – Use Input Field for Name of Account.

2 – Use Pageblock Table or DataTable For Display Records.

3 – Use Keypress  Jquery Event to Get the Input.

4 – Use Action function to Send the Input Value to Controller.

5 – Use SOQL Query In controller to Get All Related Records as Written in Input Field.

 

Please Follow if you like my Blog and share your valuable inputs.

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s