Dynamic Search Using Dynamic SOQL

Controller Code :-

public with sharing class DynamicSearchContact {

  
  private String soql {get;set;} 
  public List<Contact> conList {get;set;}

  public String sortDir
  {
    get  { if (sortDir == null) {  sortDir = 'asc'; } return sortDir;  }
    set;
  }
  public String sortField
  {
    get  { if (sortField == null) {sortField = 'Name'; } return sortField;  }
    set;
  }

  public String debugSoql
  {
    get { return soql + ' order by ' + sortField + ' ' + sortDir + ' limit 20'; }
    set;
  }

  public DynamicSearchContact ()
  {
    soql = 'select Name, Lastname, Email,Phone from Contact WHERE lastName != null';
    runQuery();
  }

  public void toggleSort() {
  
    sortDir = sortDir.equals('asc') ? 'desc' : 'asc';
    runQuery();
  }

  public void runQuery() {

    try{
      conList = Database.query(soql + ' order by ' + sortField + ' ' + sortDir + ' limit 20');
    } catch (Exception e){
      ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Ooops!'));
    }
  }

  public PageReference runSearch() {

    String name = Apexpages.currentPage().getParameters().get('Name');
    String Email= Apexpages.currentPage().getParameters().get('Email');
    String Phone= Apexpages.currentPage().getParameters().get('Phone');

    soql = 'select Name, Email, phone from Contact WHERE lastName != null';
    if (!name.equals(''))
      soql += ' and Name LIKE \'%'+String.escapeSingleQuotes(name)+'%\'';
    if (!email.equals(''))
      soql += ' and Email LIKE \''+String.escapeSingleQuotes(Email)+'%\'';
     
    if(!Phone.equals(''))
      soql += ' and Phone LIKE \''+String.escapeSingleQuotes(Phone)+'%\'';

    runQuery();

    return null;
  }
}

Visualforce Page Code :-

<apex:page controller="DynamicSearchContact" sidebar="false" showHeader="false">

   <apex:form >
      <br/>
      <br/>
      <div>
            <b><font size="3" >Search Contact Using Below Filter Criteria</font></b>
      </div>
     <br/>
          <script type="text/javascript">
              function doSearch() {
                searchServer(
                  document.getElementById("Name").value,
                  document.getElementById("Email").value,
                  document.getElementById("Phone").value
                  );
              }
          </script>

      <apex:actionFunction name="searchServer" action="{!runSearch}" rerender="results,debug,errors,results1" status="pleasewait">
              <apex:param name="Name" value="" />
              <apex:param name="Email" value="" />
              <apex:param name="Phone" value="" />
      </apex:actionFunction>

<apex:outputPanel layout="block" >

  <apex:pageBlock title="Search Contact Using Below Filter Criteria ">
  <center>
   <table cellpadding="2" cellspacing="2">
      <tr>
        <td>
        <input type="text" id="Name" onkeyup="doSearch();" align="middle"  placeholder="Search By Name" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </td>

        <td>
        <input type="text" id="Email" onkeyup="doSearch();" align="middle"  placeholder="Search By Email Address"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </td>
    
        <td>
        <input type="text" id="Phone" onkeyup="doSearch();" align="middle"  placeholder="Search by Phone"/>
        </td>
      </tr>
   </table>
  </center>
         <apex:actionStatus id="pleasewait">                                                         

         </apex:actionStatus>                                                                        
  </apex:pageBlock>
</apex:outputPanel>  


  
<apex:outputPanel id="results1" >
  <center>
  <div >
   <div style="position:relative;margin: 0 auto; overflow: hidden;text-align: center;">
    <apex:repeat value="{!conList}" var="con">
    <div id="div3" style="margin: auto 1.5em; display: inline-block;">
     <apex:pageBlock >
      <table cellspacing="5" cellpadding="5" style="background-color: White;
  height: 200px;
  width: 200px;
  border-radius: 100%;">
       <tr>
         <td>
      
         </td>
         <td>
         <apex:outputLabel style="font-weight:bold;" value="Name : "/>
          <apex:outputField value="{!con.Name}" /><br/>
        
         <apex:outputLabel style="font-weight:bold;" value="Email: "/>
          <apex:outputField value="{!con.Email}"/><br/>
       
          <apex:outputLabel style="font-weight:bold;" value="Phone: "/>
          <apex:outputField value="{!con.Phone}"/><br/>  
    
         </td>
       </tr>
      </table>
     </apex:pageBlock>
     </div>
    </apex:repeat>
   </div>
  </div>
  </center>
</apex:outputPanel>     
           
           
</apex:form>  
</apex:page>

Screenshot 1 :-

Screenshot 2 :