Tech Evangel

In this post, I am focusing on the custom lookup component missing as a seeded control in lightning.

Prerequisites: Basic knowledge of lightning component, Javascript .

Implementation

This implementation requires the following members. The server-side interaction of the component is not included in this implementation, you can develop it yourself, based on the requirement. Comment below if you need any help on that.

• SimpleLookup.cmp
• SimpleLookupController.js
• SimpleLookupHelper.js
• SimpleLookup.css

SimpleLookup.cmp

In the above component view part, I have declared four aura attributes

• label – display label of the component
• fetchedRecords – list of records matched with filter criteria
• searchText –  content of input textbox, used as filter criteria for record processing
• selectedRecord – holds the current user selection

The Custom Lookup view splits into three sections

• Input Container – for inserting search criteria
• Lookup list with a container – list the matched items based on the input
• SLDS-pill – to show the selected list item

Please see the code comments for more details.

SimpleLookupController.js

The JS methods mainly focused on the visibility (show or hide) of the view elements rather than doing complex logic.

• onLeaveLookupPane – to hide the lookup container
• remove – to hide the slds-pill and show the input text field
• onInputChange – triggers on the keyup event of the input text field and displays the lookup container with the filtered data as a list by invoking “searchContent“ helper method.
• onSearchInputClick – adds the standard SLDS input-focus style
• selectedRecordRowClick – triggers when a list item is selected from the lookup container and displayed the selected list item as an SLDS-pill after hiding the input container.

Please see the code comments for more details.

SimpleLookupHelper.js

The searchContent method is used for assigning sample records to fetchedRecords aura attribute. You can replace the existing sample code with functional one which can fetch the records from the apex controller on the server side.

• add/removeClass – overridden method for adding or removing style class.
• Show/HideElement – show or hide the HTML element based on the input

Please see the code comments for more details.

SimpleLookup.css

Don’t forget to share the post if you like it & bookmark the blog for future references.

If you have any comments or doubts on this post, Please comment on the box below.