• #21060
    Salesforce | shariq shariq #1
    Forcetalks

    How to create a search page on salesforce lightning?

    I want to create a search page which searches contact’s last name in Lightning Salesforce.

     

    #21069
    Salesforce | S S #519
    Forcetalks

    It would be simple lightning component with placeholders for capturing field values. You can even work on making it generic so that same component can be used on multiple objects instead of just Contact.

     

    For your specific query, can’t you use salesforce global search for searching contacts.

    #34540
    Salesforce | Parul Parul #2
    Forcetalks

    Create a lightning component with placeholders for capturing field values. Or you can also use Schema class with lightning component to make it generic so that same component can be used on multiple objects instead of just single object.

     

    Thanks

    #41975
    Salesforce | Parul Parul #2
    Forcetalks

    Hello Shariq,

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

    Thanks.

    #42037
    Salesforce | shariq shariq #1
    Forcetalks

    Thanks

    #42041
    Salesforce | shariq shariq #1
    Forcetalks

    Create a lightning component with placeholders for capturing field values

    #42042
    Salesforce | shariq shariq #1
    Forcetalks

    Or you can also use Schema class with lightning component to make it generic so that same component can be used on multiple objects instead of just single object.

    #42046
    Salesforce | shariq shariq #1
    Forcetalks

    I found this online – above

    #53951
     William #5
    Forcetalks

    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>

Viewing 9 posts - 1 through 9 (of 9 total)

Please to reply to this topic.

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2019 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?