function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ravindar AdminRavindar Admin 

how to add search filters in visualforce page?

Ragava reddyRagava reddy
Hi Ravindar,

Please follow the below code i think it will helps you.

<apex:page controller="Dynamicfiltercon">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                <script>
                    $.noConflict();
                    jQuery(document).ready(function() {
                        jQuery.extend(jQuery.expr[":"], {
                            "containsIN": function(elem, i, match, array) {
                                return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
                            }
                        });

                        jQuery(document).on("keyup", ".searchbynameautsearch", function() {
                            jQuery('.list tbody tr').each(function() {
                                jQuery(this).css("display", "table-row");
                            })

                            var searchterm = jQuery(this).val();

                            if (searchterm.length > 0) {
                                var lmatch = jQuery('.list tbody tr').text();

                                var match = jQuery('.list tbody tr:containsIN("' + searchterm + '")');

                                var nomatch = jQuery('.list tbody tr:not(:containsIN("' + searchterm + '"))');

                                match.addClass('selected');

                                nomatch.css("display", "none");

                            } else {

                                jQuery('.list tbody tr').css("display", "");

                                jQuery('.list tbody tr').removeClass('selected');

                            }

                        });

                    });
                </script>
                
    <apex:form >
       Search Filter:<apex:inputText value="{!recnamesearch}" styleClass="searchbynameautsearch serchfld" style="padding-left:5px;" /><br/><br/> // Autocomplete search 
    <apex:pageBlock >
    <apex:selectList size="1" value="{!selectedname}"> 
        <apex:selectOptions value="{!selectedaccnamefields}"/>  
    </apex:selectList>
    <apex:commandButton value="Show Table" action="{!ShowTable}"/>  
    
    <apex:pageBlockTable value="{!acclst}" var="rec">  
        <apex:column value="{!rec.name}" />  
    </apex:pageBlockTable> 
     </apex:pageBlock>
    </apex:form>
</apex:page>

public class Dynamicfiltercon {
    Public string selectedname{get;set;}
    public List<Account> acclst{get; set;}
    Public string recnamesearch{get;set;}
    
    Public Dynamicfiltercon(){
        acclst=new List<Account>([SELECT id,name FROM Account]);
    }
     
        Public List<Selectoption> getselectedaccnamefields(){
            List<Selectoption> lstnamesel = new List<selectoption>();
            lstnamesel.add(new selectOption('', '- None -'));
            for(Account acc :[SELECT id,name,phone,type,industry FROM Account]){
            lstnamesel.add(new selectoption(acc.id,acc.name));
            }
            return lstnamesel; 
        }
        
        public void ShowTable()  
    {  
        
       acclst=new List<Account>([SELECT id,name FROM Account WHERE id=:selectedname]);
       system.debug('@@@@acclstvalue:'+acclst);
    } 
    
}


Thanks,
Raghavendra Reddy.D
 
manish updatedmanish updated
hi Raghavendra ,

above code is not working , can you please attach the complete vf page code here.