Implementing client side search using Javascript in salesforce

Here is my code:

VF Page:

<apex:page controller="CustomAccountController">

<script>
function search(){
ApexMethod();
}

</script>

<apex:form >
<apex:actionFunction name="ApexMethod" action="{!searchAccounts}" reRender="accountTable"/>
<apex:pageBlock >

<apex:outputText >Account Name</apex:outputText>
<apex:inputText value="{!name}" onkeyup="search();"/>
<apex:pageBlockSection columns="3">

<apex:pageBlockTable id="accountTable" value="{!accounts}" var="acc">
<apex:column value="{!acc.Name}"/>
<apex:column value="{!acc.Id}"/>
<apex:column value="{!acc.AnnualRevenue}"/>
</apex:pageBlockTable>

</apex:pageBlockSection>

</apex:pageBlock>

</apex:form>

</apex:page>

Controller:

public class CustomAccountController {

public list<Account> accounts { get; set; }
public String name { get; set; }

public CustomAccountController(){
accounts = new list<Account>();
accounts = [Select Name,Id,AnnualRevenue From Account];
}

public pageReference searchAccounts(){

string query = '';

if(name != ''){

query = 'Select Name,Id,AnnualRevenue From Account Where Name like \''+name+'%\'';
accounts = database.query(query);
}
else{

query = 'Select Name,Id,AnnualRevenue From Account';
accounts = database.query(query);
}

return null;
}
}

Note: I have not implemented pagination for this page.

• This reply was modified 9 years ago by  Kumar.