Hello, I created a custom searchbar component that looks through records of a custom object. I have two rewuirements. first I want to show results by clicking the enter button instead just by clicking the search button. Second requirement is, that i want a drop down with all Typ-categories so i can filter results by these before searching.

My code:

COMPONENT

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="MediathekSearchController">
    
    <!-- handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <!-- attributes -->
    <aura:attribute name="showSearchResults" type="Boolean" default="false"/>
    <aura:attribute name="searchKey" type="String"/>
    <aura:attribute name="mediathekList" type="List" default="Mediathek[]"/>
    <aura:attribute name="mediathekColumns" type="List"/>
    
    <div class= "slds-box">
        <div class="slds-grid slds-wrap" >
            <div class="slds-size_12-of-12">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem  size="9">
                <lightning:input name="searchKey" placeholder="Suchbegriff einfügen" value="{!v.searchKey}"/>
            </lightning:layoutItem>
            <lightning:layoutItem  size="2">
                <lightning:button variant="brand" label="Suchen" title="Search" onclick="{!c.search}" class="customButton"/>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
    </div>
    <div class="haha">
        <aura:if isTrue="{!v.showSearchResults}">
            <lightning:layout multipleRows="true">
                <lightning:layoutItem padding="around-small" size="12" >
                    <lightning:datatable keyField="id"
                                         data="{!v.mediathekList}"
                                         columns="{!v.mediathekColumns}"
                                         hideCheckboxColumn="true"/>
                </lightning:layoutItem>
            </lightning:layout>
        </aura:if>
    </div>
        </div>
    
    
    
</aura:component>

JS:

({
    init: function (component, event, helper){
       component.set('v.mediathekColumns', [
            {label: 'Bezeichnung', fieldName: 'Bezeichnung_Search__c', type: 'url' , fixedWidth: 395, 
             typeAttributes: {label: { fieldName: 'Bezeichnung__c' }, target: '_blank'}
            },
           {label: 'Typ', fieldName: 'Typ__c', type: 'text',  fixedWidth: 116,
            },
           {label: 'Zielgruppe', fieldName: 'Zielgruppe__c', type: 'text', fixedWidth: 116,
            },
           {label: 'Umfang', fieldName: 'Umfang__c', type: 'text', fixedWidth: 112,
           },
           
         
          ]);
             var action = component.get("c.getSearchResult");
       
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var records =response.getReturnValue();
                records.forEach(function(record){
                    
           			record.BEZ = record.Bezeichnung__c;
                });
                component.set("v.mediathekList", records);
            }
        });
        $A.enqueueAction(action);
    },




        
    search : function(component, event, helper) {
        helper.getSearchResultsFromApex(component, event, helper);
        component.set("v.showSearchResults",true);
    }
})

HELPER

({
    getSearchResultsFromApex : function(component, event, helper){
     
        var action = component.get("c.getSearchResult");
        action.setParams({ searchKey : component.get("v.searchKey") });
     
        // Create a callback that is executed after
        // the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
 var result = response.getReturnValue();
  result.forEach(function(result){
                    result.Name = '/'+result.Id;
      				
                });
               
                // SOSL will always return the list in the order they were queried
                component.set("v.mediathekList",result[0]);
                  
                
            }
            else if (state === "INCOMPLETE") {
                // do something
            }
                else if (state === "ERROR") {
                    var errors = response.getError();
                    if (errors) {
                        if (errors[0] && errors[0].message) {
                            console.log("Error message: " +
                                        errors[0].message);
                        }
                    } else {
                        console.log("Unknown error");
                    }
                }
        });
        $A.enqueueAction(action);
    }
})

APEX Controller
 

public class MediathekSearchController {


    
    @AuraEnabled(cacheable=true)
    public static List<List<sObject>> getSearchResult(String searchKey){
     String findStr = '*'+searchKey+'*';
        system.debug('searchKey ' + searchKey);
        system.debug('findStr ' + findStr);
        List<List<sObject>> searchResult = [FIND : findStr
                                            IN ALL FIELDS RETURNING
                                            Mediathek__c (Id, Name, Bezeichnung__c, Typ__c, Zielgruppe__c, Umfang__c, Bezeichnung_Link__c, Bezeichnung_Search__c)
                                            ];
        return searchResult;
     
    } 
}

​​​​​​​​​​​​​​