Hi All ,
I follow the Steps in the  link below to filter data but i do not see the Button to Fetch the data when i load the visualforce page. 
https://blog.jeffdouglas.com/2010/07/13/building-a-dynamic-search-page-in-visualforce/

Help me please

<apex:page controller="allItems" sidebar="false">

  <apex:form >
  <apex:pageMessages id="errors" />
  
  <apex:pageBlock title="Find Me A Customer!" mode="edit">
    
  <table width="100%" border="0">
  <tr>  
    <td width="200" valign="top">
  
      <apex:pageBlock title="Parameters" mode="edit" id="criteria">
      
      <script type="text/javascript">
      function doSearch() {
        searchServer(
          document.getElementById("Product").value,
          document.getElementById("Comments").value,
          document.getElementById("Lot_Number").value,
          document.getElementById("centers").options[document.getElementById("technology").selectedIndex].value
          );
      }
      </script> 
      
      <apex:actionFunction name="searchServer" action="{!runSearch}" rerender="results,debug,errors">
          <apex:param name="Product" value="" />
          <apex:param name="lastName" value="" />
          <apex:param name="Lot_Number" value="" />
          <apex:param name="centers" value="" />
      </apex:actionFunction>
          
      <table cellpadding="2" cellspacing="2">
      <tr>
        <td style="font-weight:bold;">Product Name<br/>
        <input type="text" id="Product" onkeyup="doSearch();"/>
        </td>
      </tr>
      <tr>
        <td style="font-weight:bold;">Comments<br/>
        <input type="text" id="Comments" onkeyup="doSearch();"/>
        </td>
      </tr>
      <tr>
        <td style="font-weight:bold;">Lot Number<br/>
        <input type="text" id="Lot_Number" onkeyup="doSearch();"/>
        </td>
      </tr>
      <tr>
        <td style="font-weight:bold;">FFP Centers<br/>
          <select id="centers" onchange="doSearch();">
            <option value=""></option>
            <apex:repeat value="{!centerss}" var="tech">
              <option value="{!tech}">{!tech}</option>
            </apex:repeat>
          </select>
        </td>
      </tr>
      </table>
      
      </apex:pageBlock>
  
    </td>
    <td valign="top">
    
    <apex:pageBlock mode="edit" id="results">
                
        <apex:pageBlockTable value="{!allProduct}" var="allProd">
        
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Product Name" action="{!toggleSort}" rerender="results,debug">
                        <apex:param name="sortField" value="Product_Hiden_Name__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                <apex:outputField value="{!allProd.Product_Hiden_Name__c}"/>
            </apex:column>
            
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Comments" action="{!toggleSort}" rerender="results,debug">
                        <apex:param name="sortField" value="Comments__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                <apex:outputField value="{!allProd.Comments__c}"/>
            </apex:column>
            
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="Lot_Number" action="{!toggleSort}" rerender="results,debug">
                        <apex:param name="sortField" value="Lot_Number__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                <apex:outputField value="{!allProd.Lot_Number__c}"/>
            </apex:column>
            
            <apex:column >
                <apex:facet name="header">
                    <apex:commandLink value="centers" action="{!toggleSort}" rerender="results,debug">
                        <apex:param name="sortField" value="FFP_Centers__c" assignTo="{!sortField}"/>
                    </apex:commandLink>
                </apex:facet>
                <apex:outputField value="{!allProd.FFP_Centers__c}"/>
            </apex:column>
            
        </apex:pageBlockTable>
                
    </apex:pageBlock>
    
    </td>
  </tr>
  </table>
  
  <apex:pageBlock title="Debug - SOQL" id="debug">
      <apex:outputText value="{!debugSoql}" />           
  </apex:pageBlock>    
  
  </apex:pageBlock>

  </apex:form>

</apex:page>

Controller:   I get the following  in the  lines 61, 63, 65 when i use the quote ' ' in the Original post.
Compile Error: Found punctuation symbol or operator '%' that isn't valid in Apex. at line 61 column 85

public with sharing class allItems {
  
  // the soql without the order and limit
  private String soql {get;set;}
  // the collection of contacts to display
  public List<Articles_Containers__c> allProduct {get;set;}
  
  // the current sort direction. defaults to asc
  public String sortDir {
    get  { if (sortDir == null) {  sortDir = 'asc'; } return sortDir;  }
    set;
  }
  
  // the current field to sort by. defaults to last name
  public String sortField {
    get  { if (sortField == null) {sortField = '    FFP_Centers__c'; } return sortField;  }
    set;
  }
  
  // format the soql for display on the visualforce page
  public String debugSoql {
    get { return soql + ' order by ' + sortField + ' ' + sortDir + ' limit 20'; }
    set;
  }

  // init the controller and display some sample data when the page loads
  public allItems() {
    soql = 'select Name ,Left_Warehouse_and_Delivered__c, Lot_Number__c, Expiration_Date__c, Product_Hiden_Name__c,FFP_Centers__c,Prod__c,UM__c, Container__c, Number__c, On_Hand__c,  Pending__c,  Available__c, Purpose__c, Condition__c, Age__c, Comments__c , Prod__c FROM Articles_Containers__c WHERE On_Hand__c >0  AND IsOpened__c = 1 ORDER BY FFP_Centers__c, Prod__c,UM__c ,Number__c';
    runQuery();
  }
  
  // toggles the sorting of query from asc<-->desc
  public void toggleSort() {
    // simply toggle the direction
    sortDir = sortDir.equals('asc') ? 'desc' : 'asc';
    // run the query again
    runQuery();
  }
  
  // runs the actual query
  public void runQuery() {
        
    try {
      allProduct = Database.query(soql + ' order by ' + sortField + ' ' + sortDir + ' limit 20');
    } catch (Exception e) {
      ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Ooops!'));
    }

  }
  
  // runs the search with parameters passed via Javascript
  public PageReference runSearch() {
    
    String Product = Apexpages.currentPage().getParameters().get('Product_Hiden_Name__c');
    String Comments = Apexpages.currentPage().getParameters().get('Comments__c');
   String Lot_Number = Apexpages.currentPage().getParameters().get('Lot_Number__c');
    String centers = Apexpages.currentPage().getParameters().get('FFP_Centers__c');
    
    soql = 'select Name ,Left_Warehouse_and_Delivered__c, Lot_Number__c, Expiration_Date__c, Product_Hiden_Name__c,FFP_Centers__c,Prod__c,UM__c, Container__c, Number__c, On_Hand__c,  Pending__c,  Available__c, Purpose__c, Condition__c, Age__c, Comments__c , Prod__c FROM Articles_Containers__c WHERE On_Hand__c >0  AND IsOpened__c = 1 ORDER BY FFP_Centers__c, Prod__c,UM__c ,Number__c';
   if (!Product.equals(''))
    soql += ' and Product LIKE "+String.escapeSingleQuotes(Product_Hiden_Name__c)+"%';
   if (!Comments.equals(''))
   soql += ' and Comments__c LIKE "+String.escapeSingleQuotes(Comments__c)+"%';
   if (!Lot_Number.equals(''))
     soql += 'and Lot_Number__c LIKE "+String.escapeSingleQuotes(Lot_Number__c)+"%';  
    if (!centers.equals(''))
      soql += 'and FFP_Centers__c includes ("+centers+")';

    // run the query again
    runQuery();

    return null;
  }
  
  // use apex describe to build the picklist values
  public List<String> centerss {
    get {
      if (centerss == null) {
              
        centerss = new List<String>();
        Schema.DescribeFieldResult field = Articles_Containers__c.FFP_Centers__c.getDescribe();
            
        for (Schema.PicklistEntry f : field.getPicklistValues())
          centerss.add(f.getLabel());
          
      }
      return centerss;          
    }
    set;
  }

}

​​​​​​​