Component:
 

<aura:component controller="SearchController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >  
   <aura:attribute name="contacts" type="Contact[]"></aura:attribute>  
   <aura:attribute name="contactlist" type="Contact[]"></aura:attribute>  
   <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>  
   <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>  
   <!--create a component attributs -->  
   <aura:attribute name="Spinner" type="boolean" default="false"/>  
   <aura:attribute name="searchResult" type="List"></aura:attribute>  
   <aura:attribute name="picvalue" type="List"/>  
   <aura:attribute name="fnamefilter" type="String" default=""/>  
   <aura:attribute name="lnamefilter" type="String" default=""/>  
   <aura:attribute name="emailfilter" type="String" default=""/>  
   <aura:attribute name="bdatefilter" type="String" default=""/>  
   <aura:attribute name="prefilter" type="String" default=""/>  
   <aura:attribute name="leadsourcefilter" type="String" default=""/>  
   <aura:attribute name="mycolumns" type="List"></aura:attribute>  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />   
   <fieldset class="slds-box slds-theme--default slds-container--small">  
     <legend class="slds-text-heading--small slds-p-vertical--medium">  
       Add Contact  
     </legend>  
     <form class="slds-form--stacked">    
        <lightning:helptext content="Please enter your First name" class="customIcon"/>   
       <lightning:input type="text" aura:id="contactlist" label="FirstName"  
                name="FirstName"  
                value="{!v.fnamefilter}"  
                />   
       <lightning:input type="text" aura:id="contactlist" label="LastName"  
                name="LastName"  
                value="{!v.lnamefilter}"  
                />  
       <lightning:input aura:id="contactlist" label="Email"  
                name="Email"  
                value="{!v.emailfilter}"  
                placeholder="Enter Email"/>  
       <lightning:input type="date" aura:id="contactlist" label="BirthDate"  
                name="BirthDate" value="{!v.bdatefilter}" />  
       <lightning:input type="checkbox" aura:id="contactform" label="Prequalified?"   
                name="Prequalified"  
                checked="{!v.prefilter}"/>  
       <lightning:select aura:id="contactlist" value="{!v.leadsourcefilter}" label="LeadSource">      
         <option value="choose">Choose one...</option>   
         <aura:iteration items="{!v.picvalue}" var="s">  
           <option value="{!s}">{!s}</option>  
         </aura:iteration>   
       </lightning:select><br/>  
       <lightning:button onclick="{!c.Search}"  
                variant="brand"  
                label="Search"  
                iconName="utility:search"/>   
       <lightning:button onclick="{!c.Reset}"  
                variant="brand"  
                label="Reset"  
                iconName="utility:reset_password"/>   
     </form>  
   </fieldset>  
   <aura:if isTrue="{!v.Spinner}">  
     <div aura:id="spinnerId" class="slds-spinner_container">  
       <div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">  
         <span class="slds-assistive-text">Loading</span>  
         <div class="slds-spinner__dot-a"></div>  
         <div class="slds-spinner__dot-b"></div>  
       </div>  
     </div>  
   </aura:if><br/>  
   <lightning:datatable data="{!v.contacts}"  
              columns="{!v.mycolumns}"  
              keyField="Id"/>  
 </aura:component>

Controller:

({  
   doInit : function(component) {      
     var pickvar = component.get("c.getPickListValuesIntoList");  
     pickvar.setCallback(this, function(response) {  
       var state = response.getState();  
       if(state === 'SUCCESS'){  
         var list = response.getReturnValue();  
         component.set("v.picvalue", list);  
       }  
       else if(state === 'ERROR'){  
         alert('ERROR OCCURED.');  
       }  
     })  
     $A.enqueueAction(pickvar);  
   },  
   Save: function(component, event, helper) {  
     debugger;  
     var newContact = component.get("v.contactlist");  
     alert(newContact);  
     console.log("Create Contact: " + JSON.stringify(newContact));  
     helper.createContact(component, newContact);  
   },  
   Search : function(component, event, helper) {  
     console.log(component.get("v.prefilter"));  
     console.log('Search record');  
     component.set('v.mycolumns', [  
       {label: 'FirstName', fieldName: 'FirstName', type: 'text'},  
       {label: 'LastName', fieldName: 'LastName', type: 'text'},  
       {label: 'Email', fieldName: 'Email', type: 'email'},  
       {label: 'BirthDate', fieldName: 'BirthDate', type: 'Date'},  
       {label: 'Prequalified', fieldName: 'Prequalified', type: 'text'},  
       {label: 'LeadSource', fieldName: 'LeadSource', type: 'Picklist'}  
     ]);  
     var act = component.get("c.searchRecord");  
     var act1 = component.get("v.fnamefilter");  
          var act2 = component.get("v.lnamefilter");  
     var act3 = component.get("v.emailfilter");  
     var act4 = component.get("v.birthdatefilter");  
     var act5 = component.get("v.Prequalified");  
     var act6 = component.get("v.leadsourcefilter");  
     act.setParams({"fnamefilter":act1,"lnamefilter":act2,"emailfilter":act3,"birthdatefilter":act4,"Prequalified":act5,"leadsourcefilter":act6});  
     act.setCallback(this,function(a){  
       var state = a.getState();  
       if(state === 'SUCCESS'){  
         var storeResponse = a.getReturnValue();  
         component.set("v.contacts", storeResponse);  
       }  
     });  
     $A.enqueueAction(act);  
   },  
   // this function automatic call by aura:waiting event   
   showSpinner: function(component, event, helper) {  
     // make Spinner attribute true for display loading spinner   
     component.set("v.Spinner", true);   
   },  
   // this function automatic call by aura:doneWaiting event   
   hideSpinner : function(component,event,helper){  
     // make Spinner attribute to false for hide loading spinner    
     component.set("v.Spinner", false);  
   },  
   Reset : function(component, event, helper) {  
     component.set("v.fnamefilter", "");  
     component.set("v.lnamefilter", "");  
     component.set("v.emailfilter", "");  
     component.set("v.bdatefilter", "");  
     component.set("v.Prequalified", "");  
     component.set("v.leadsourcefilter", "");  
   },  
 })

Apex class:

public class SearchController{  
   @AuraEnabled  
   public static List<Contact> fetchcontact() {  
     List<Contact> conList = [SELECT FirstName,LastName, Email,Phone,LeadSource from Contact];  
     system.debug('list'+conList);  
     return conList;  
   }  
   @AuraEnabled  
   public static Contact[] searchRecord (String fnamefilter,String lnamefilter,String emailfilter,String leadsourcefilter) {  
     String lname = '%' +lnamefilter + '%';  
     String fname = '%' +fnamefilter + '%' ;  
     String email = emailfilter + '%';  
     String leadsource = leadsourcefilter;  
     system.debug('lnamefilter ' + lnamefilter );  
     system.debug('email ' + email );  
     system.debug('leadsource ' + leadsource );  
     List < Contact > returnList = new List < Contact > ();  
     List < Contact > contact = [select FirstName,LastName, Email,BirthDate,Phone,LeadSource from Contact where FirstName LIKE: fname AND LastName LIKE: lname AND Email LIKE: email AND leadsource LIKE: leadsource] ;  
     system.debug('contact ' + contact );  
     for (Contact acc: contact) {  
       returnList.add(acc);  
     }  
     return returnList;  
   }  
   @AuraEnabled      
   public static List<String> getPickListValuesIntoList(){  
     List<String> pickListValuesList = new List<String>();  
     Schema.DescribeFieldResult fieldResult = Contact.LeadSource.getDescribe();  
     List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();  
     for( Schema.PicklistEntry pickListVal : ple){  
       pickListValuesList.add(pickListVal.getLabel());  
       System.debug('Values in leadsource are: '+pickListValuesList);  
     }     
     return pickListValuesList;  
   }  
 }

 

reate a search button having three boxes i.e. first name last name, and email. Now on click of the search button corresponding contacts will be displayed.



On the search result, each row should have a link to the contact that means when someone clicks on firstname, it should take in detail of that record. Also when you click on search, you should see a wait message till the time search is happening and on click of search, the complete page should not refresh. This means a flicker of the page should not happen.