Hello Everyone, In this tutorial, I am going provide a working example that shows you, how to bind the salesforce account records in HTML table and search that records using textbox KEYUP event.

After completing this tutorial, you’ll able to:
  • Bind Salesforce record in HTML table.
  • Use the KEYUP event of a textbox.
So, Let’s begin,

Step 1: Login to your salesforce org. and open developer console.

Step 2: Navigate to File | New | Apex Class and create an apex class called PullAccountRecord and replace the following piece of code.

PullAccountRecord.apxc
 public class PullAccountRecord{   
    public List<AccountWrapper> accRecords{get;  set;} 
    public PullAccountRecord(){
        accRecords= new List<AccountWrapper>();
        List<Account> acc =[Select Id, Name,Phone,Type from Account order by name asc];
        for(Account a:acc){
         accRecords.add(new AccountWrapper(a.Name,a.Phone,a.Type));
        } 
   }

   class AccountWrapper{
      Public string PhoneNumber{get;set;}
      Public string IddCountryCode{get;set;}
      Public string sType{get;set;}
          public AccountWrapper(String PhoneNumber,String IddCountryCode ,String sType){
               this.PhoneNumber=PhoneNumber;
               this.IddCountryCode=IddCountryCode;
               this.sType=sType;
          }
   }
 }

Step 3: Navigate to File | New | Visualforce Page and create a visualforce page called SearchRecordOnKeyUp and replace the following code.

SearchRecordOnKeyUp.vfp
 <apex:page controller="PullAccountRecord" sidebar="false">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/JavaScript" /> 
    <apex:form >
        <apex:sectionHeader title="Country" subtitle="Account" />
        <apex:pageMessages id="errors" />
        <apex:pageBlock title="Find Account" mode="edit">
            <table width="100%" border="0">
                <tr>
                    <td width="200" valign="top">
                        <apex:pageBlock title="Parameters" mode="edit" id="criteria">
                            <table cellpadding="2" cellspacing="2">
                                <tr>
                                    <td style="font-weight: bold;">
                                    Search By Account Name <br />
                                    <input type="text" id="search" />
                                    </td>
                                    <tr>
                                        <td>
                                        <div style="text-align: center; font-size: 18px; font-family: Calbiri; color: Black;">
                                         Time(HH:MM:SS)
                                        <div id="clock" style="text-align: center; font-size: 30px;">
                                        </div>
                                        </div>
                                        </td>
                                    </tr>
                                </tr>
                            </table>
                        </apex:pageBlock>
                    </td>
                    <td valign="top">
                        <apex:pageBlock mode="edit" id="results">
                            <apex:pageBlockTable value="{!accRecords}" var="acc" columns="3" id="tblData">
                                <apex:column width="300">
                                    <apex:outputText value="{!acc.PhoneNumber}" />
                                </apex:column>
                                <apex:column width="300"> 
                                    <apex:outputText value="{!acc.IddCountryCode}" />
                                </apex:column>
                                <apex:column width="200"> 
                                    <apex:outputText value="{!acc.sType}" />
                                </apex:column>
                            </apex:pageBlockTable>
                        </apex:pageBlock>
                    </td>
                </tr>
            </table>
        </apex:pageBlock>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#search').keyup(function(){
                    searchTable($(this).val());
                });
            });           

            function searchTable(searchText){ 
                var table = $('table[id$=tblData]');
                table.find('tr').each(function(index, row){
                    var allCells = $(row).find('td');
                    if(allCells.length > 0){
                        var found = false;
                        allCells.each(function(index, td){
                            var regExp = new RegExp(searchText, 'i');
                            if(regExp.test($(td).text())){
                                found = true;
                                return false;
                            }
                        });
                        if(found == true)$(row).show();else $(row).hide();
                    }
                });
            } 
    
            var int = self.setInterval("clock()",1000);
            /*Clock method*/
            function clock(){
                var d=new Date();
                var t=d.toLocaleTimeString();
                document.getElementById("clock").innerHTML = "<B>" + t + "</B>";
            }
        </script>
    </apex:form>
 </apex:page>

Output:

See also:

Conclusion:
Hope you like this post, for any query's please comment.
Thank you.