i am trying to achieve this, placing the search button inside the input. Onclick of search icon, i need to invoke other functions. How to make the search icon acting as button and invoke the js function once its clicked? Added the code below in the comment so far written

enter image description here

  • <div class="slds-form-element"> <div class="slds-form-element__control"> <div class="slds-input-has-icon slds-input-has-icon--right"> <img class="slds-input__icon searchIcon" aria-hidden="true" src="{!$Resource.SearchIcon}"/> <ui:inputText value="{!v.SearchTerm}" class="slds-input search-input" placeholder="Search by Account Name" /> </div> </div> </div> – Bhuvnisha Nov 27 '19 at 5:57

The Base Component lightning:input has a search attribute, which when defined as type = "search" will display the Lightning Design System search utility icon. You can invoke the search function when user hits the 'enter' key.

As per Salesforce documentation.

An input field for entering a search string. This field displays the Lightning Design System search utility icon.

<lightning:input type="search" label="Search" name="search" />

To indicate activity in the search field with a spinner, such as data loading, use the isLoading attribute.

<lightning:input type="search" label="Search" isLoading="true" />

If you want to build your own custom Component using Lightning Design System, please refer to the below blog posts.

Create Re-Usable Custom Lookup In Salesforce Lightning Component Version 2 : Dynamic

Lookup component in Salesforce Lightning

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.