Hello Team,

I am getting the following error - 
This page has an error. You might just need to refresh it. Action failed: c:ContactListSearch$controller$searchKeyChange [Cannot read properties of undefined (reading 'setParams')] Failing descriptor: {c:ContactListSearch$controller$searchKeyChange} 
while running the app with the following code.

QuickContacts.app
<aura:application>
    <link href='/resource/bootstrap/' rel="stylesheet"/>
    <div class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">Lightning Contacts</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <c:ContactListSearch/>
                <c:ContactList/>
            </div>
        </div>
    </div>
</aura:application>

ContactList.cmp
<aura:component controller="ContactController">
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="c:SearchKeyEvent" action="{!c.searchKeyChange}"/>
    <ul class="list-group">
        <aura:iteration items="{!v.contacts}" var="contact">
            <li class="list-group-item">
                <a href="{! '#contact/' + contact.Id }">
                    <p>{!contact.Name}</p>
                    <p>{!contact.Phone}</p>
                </a>
            </li>
        </aura:iteration>
    </ul>
</aura:component>

ContactListController.js
({
    doInit : function(component, event)
    {
        var action=component.get("c.findAll");
        action.setCallback(this,function(a)
                           {
                               component.set("v.contacts",a.getReturnValue());    
                           });
    $A.enqueueAction(action);
    },
    searchKeyChange: function(component, event) {
        var searchKey = event.getParam("searchKey");
        var action = component.get("c.findByName");
        action.setParams({
          "searchKey": searchKey
        });
        action.setCallback(this, function(a) {
            component.set("v.contacts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

ContactListSearch.cmp
<aura:component >
    <input type="text" class="form-control" placeholder="Search" onkeyup="{!c.searchKeyChange}"/>
</aura:component>

SearchKeyEvent.evt
<aura:event type="APPLICATION" access="global">
    <aura:attribute name="searchKey" type="String"/>
</aura:event>

ContactListSearchController.js
({
        searchKeyChange : function(component, event, helper) {
        
        var myEvent = $A.get("e.c:SearchKeyChange");
        myEvent.setParams({"searchKey":event.target.value});
        myEvent.fire();
   
    }
    })

Can anyone please help me to find the error?

Hello Team,

I am getting the following error - 
This page has an error. You might just need to refresh it. Action failed: c:ContactListSearch$controller$searchKeyChange [Cannot read properties of undefined (reading 'setParams')] Failing descriptor: {c:ContactListSearch$controller$searchKeyChange} 
while running the app with the following code.

QuickContacts.app
<aura:application>
    <link href='/resource/bootstrap/' rel="stylesheet"/>
    <div class="navbar navbar-default navbar-static-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">Lightning Contacts</a>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <c:ContactListSearch/>
                <c:ContactList/>
            </div>
        </div>
    </div>
</aura:application>

ContactList.cmp
<aura:component controller="ContactController">
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:handler event="c:SearchKeyEvent" action="{!c.searchKeyChange}"/>
    <ul class="list-group">
        <aura:iteration items="{!v.contacts}" var="contact">
            <li class="list-group-item">
                <a href="{! '#contact/' + contact.Id }">
                    <p>{!contact.Name}</p>
                    <p>{!contact.Phone}</p>
                </a>
            </li>
        </aura:iteration>
    </ul>
</aura:component>

ContactListController.js
({
    doInit : function(component, event)
    {
        var action=component.get("c.findAll");
        action.setCallback(this,function(a)
                           {
                               component.set("v.contacts",a.getReturnValue());    
                           });
    $A.enqueueAction(action);
    },
    searchKeyChange: function(component, event) {
        var searchKey = event.getParam("searchKey");
        var action = component.get("c.findByName");
        action.setParams({
          "searchKey": searchKey
        });
        action.setCallback(this, function(a) {
            component.set("v.contacts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

ContactListSearch.cmp
<aura:component >
    <input type="text" class="form-control" placeholder="Search" onkeyup="{!c.searchKeyChange}"/>
</aura:component>

SearchKeyEvent.evt
<aura:event type="APPLICATION" access="global">
    <aura:attribute name="searchKey" type="String"/>
</aura:event>

ContactListSearchController.js
({
        searchKeyChange : function(component, event, helper) {
        
        var myEvent = $A.get("e.c:SearchKeyChange");
        myEvent.setParams({"searchKey":event.target.value});
        myEvent.fire();
   
    }
    })

Can anyone please help me to find the error?