+ Start a Discussion
Shruthi P 5Shruthi P 5 

how to implement enter key press for search functionality on lightning page? i have a search button which is working on the functionality but how do i make it work by using the enter key as well

Khan AnasKhan Anas (Salesforce Developers) 
Hi Shruthi,

Greetings to you!

Please try the below code, I have tested in my org and it is working fine. Kindly modify the code as per your requirement.

public class SearchKeyupC {
    public static List<Account> search(String key){
        String keyword = key + '%' ;
        List<Account> sr = [SELECT Name, Phone, Rating FROM Account WHERE Name LIKE:keyword];
        return sr;

<aura:component controller="SearchKeyupC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="PageHeading" type="String" default="Search Accounts"/>
    <aura:attribute name="SearchKeyword" type="String" />
    <aura:attribute name="mydata" type="Account"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <div class="slds-m-top--xx-large">
        <div class="slds-page-header">
            <div class="slds-align--absolute-center">
                <div class="slds-text-heading--large">       
    <br/> <br/>
    <div class = "slds-size--3-of-8">
        <ui:inputText aura:id="searchInput" 
                      label="Search " 
                      updateOn="keyup" />
    <lightning:datatable data="{! v.mydata }" 
                         columns="{! v.mycolumns }" 
                         keyField="Id" />

    init : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Account Name', fieldName: 'Name', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'text'},
            {label: 'Rating', fieldName: 'Rating', type: 'text'}
    doSearch : function(component, event, helper) {
        var searchInput = component.find("searchInput");
        var searchValue = searchInput.get("v.value");
        if (searchValue == '' || searchValue == null) {
            component.set("v.mydata", " ");
            var action = component.get("c.search");
            action.setParams({key : searchValue});
            action.setCallback(this, function(response) {
                var state = response.getState();
                if (state === "SUCCESS") {
                    component.set("v.mydata", response.getReturnValue());
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " + 
                    else {
                        console.log("Unknown Error");



.THIS.slds-size--3-of-8 {
    margin-left: 620px;

<aura:application extends="force:slds">

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Salesforce seekarSalesforce seekar
hi Shruthi , 

please find this as wel

Please mark this if it justify your requirement