I have been trying to implement a custom search in communities whereby the user can type in the first line of the address and the search will update with each keystroke. But I receive this error:
Action failed: c$ContactList$controller$searchKeyChange [Cannot read property 'setParams' of null] Failing descriptor: {c$ContactList$controller$searchKeyChange}
The code in question is below.
ContactList.cmp
<aura:component controller="ContactListController">
<aura:attribute name="accounts" type="account[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:SearchKeyChange" action="{!c.searchKeyChange}"/>
<ul>
<aura:iteration items="{!v.accounts}" var="account">
<li>
<a href="{! '#/sObject/' + account.Id + '/view'}">
<p>{!account.Name}</p>
<p>{!account.Phone}</p>
<p>{!account.BillingStreet}</p>
</a>
</li>
</aura:iteration>
</ul>
ContactListController.js
({
doInit : function(component, event) {
var action = component.get("c.findAll");
action.setCallback(this, function(a) {
component.set("v.accounts", a.getReturnValue());
});
$A.enqueueAction(action);
},
searchKeyChange: function(component, event) {
var searchKey = event.getParam("searchKey");
var action = component.get("e.c.findAll");
action.setParams({
"searchKey": searchKey
});
action.setCallback(this, function(a) {
component.set("v.accounts", a.getReturnValue());
});
$A.enqueueAction(action);
}
})
SearchBar.cmp
<aura:component >
<div>
<input type="text" class="form-control"
placeholder="Search" onkeyup="{!c.searchKeyChange}"/>
</div>
SearchBarController.js
({
searchKeyChange : function(component, event, helper) {
var myEvent = $A.get("e.c:SearchKeyChange");
myEvent.setParams({"searchKey":event.target.value});
myEvent.fire();
}
})
SearchKeyChange.evt
<aura:event type="APPLICATION">
<aura:attribute name="searchKey" type="String"/>
</aura:event>
I can't for the life of me figure out what the issue is. Any feedback would be great.