How to create a search page on Salesforce Lightning?

Hello Shariq,

Read this blog you will find your answer(link of the blog)

Thanks.

Here is the code, you can use:

Apex class

public class ContactSearch {

@AuraEnabled

public static list<string>getAccount(){

list<string>options= new list<string>();

for(contact acc:[select name from Contact]){

options.add(acc.name);

system.debug('options name values'+options);

}

return options;

}

}

Cmp

<aura:component controller="ContactSearch ">

<!--start attributes here-->

<aura:attribute name="selectedOptions" type="string"/>

<aura:attribute name="listOfOptions" type="string[]"/>

<aura:attribute name="filteredOptions" type="string[]"/>

<aura:attribute name="searchLookup" type="string"/>

<aura:attribute name="searchKey" type="string"/>

<aura:attribute name="placeholder" type="string"/>

<aura:attribute name="actionMethod" type="string"/>

<aura:handler name="init" value="{!this}" action="{!c.myAction}"/>

<!-- clse attributes here-->

Conatct Search {!v.listOfOptions}

<div class="slds-form-element">

<div class="slds-form-element__control">

<div class="slds-combobox_container slds-has-inline-listbox">

<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-lookup"

aria-expanded="false"

aria-haspopup="listbox"

role="combobox"

aura:id="searchLookup">

<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" >

<ui:inputText updateOn="keyup"

keyup="{!c.keypress}"

class="slds-input slds-combobox__input"

value="{!v.searchKey}" />

<aura:if isTrue="{!empty(v.selectedOptions)}">

<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right"

title="Description of icon when needed">

<lightning:icon iconName="utility:search" size="small" variant="brand"/>

<span class="slds-assistive-text">Description of icon</span>

</span>

<aura:set attribute="else">

<button class="slds-button slds-button_icon slds-input__icon slds-input__icon_right"

onclick="{!c.clear}">

<lightning:icon iconName="utility:close" size="small"/>

<span class="slds-assistive-text">Remove selected option</span>

</button>

</aura:set>

</aura:if>

</div>

<div id="listbox-unique-id" role="listbox">

<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid"

role="presentation">

<aura:iteration items="{!v.filteredOptions}" var="option">

<li role="presentation"

class="slds-listbox__item"

onclick="{!c.selectOption}"

data-record="{!option}">

<span id="listbox-option-unique-id-01"

class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta"

role="option">

<span class="slds-media__body">

<span class="slds-listbox__option-text slds-listbox__option-text_entity">{!option}</span>

</span>

</span>

</li>

</aura:iteration>

</ul>

</div>

</div>

</div>

</div>

</div>

</aura:component>

Controller.js
({
myAction : function(component, event, helper) {
helper.helperMethod(component);
},
keypress:function(component,event,helper){
var searchKey= component.get("v.searchKey");
//alert('serach key value'+searchKey);
var searchLookup=component.get("v.searchLookup");
// alert('serach'+searchLookup);
var searchLookup=component.find("searchLookup");
//  alert('search key value is '+searchLookup);
if(searchKey.length>0){
$A.util.addClass(searchLookup,'slds-is-open');
$A.util.removeClass(searchLookup,'slds-combobox-lookup');
var options=component.get("v.listOfOptions");
var filteredOptions=options.filter(function (el){
return el.toLowerCase().indexOf(searchKey.toLowerCase())>-1;
});
component.set("v.filteredOptions",filteredOptions);
}else{

$A.util.addClass(searchLookup,'slds-combobox-lookup');
$A.util.removeClass(searchLookup,'slds-is-open');
}
},
clear: function (component, event, heplper) {
var searchLookup = component.find("searchLookup");
$A.util.addClass(searchLookup, 'slds-combobox-lookup');
component.set("v.selectedOptions", null);
component.set("v.searchKey", null);
},
selectOption: function (component, event, helper) {
var selectedItem = event.currentTarget.dataset.record;
alert('selected value is'+selectedItem);
component.set("v.selectedOptions", selectedItem);
var searchLookup = component.find("searchLookup");
$A.util.removeClass(searchLookup, 'slds-is-open');
component.set("v.searchKey", selectedItem);

}
})
Helper.js
({
helperMethod : function(component){
var actionMethod = component.get("v.actionMethod");
var action = component.get("c.getAccount");
action.setCallback(this, function (response) {
var state = response.getState();
if (state === "SUCCESS") {
var options = response.getReturnValue();
//  alert('Returned values'+response.getReturnValue());
//console.log(options);
component.set("v.listOfOptions", options);
}
});
$A.enqueueAction(action);
},
})
Application
<aura:application extends="force:slds" >
<c:ComponentName/>
</aura:application>