slds - Typeahead block with lightning components

use the component from Basecomponent like this

<aura:component controller="PortalGroupController" >
<aura:handler name="oSelectedRecordEvent" event="c:selectedsObjectRecordEvent" action="{!c.handleComponentEvent}"/>   

<c:PortalTypeAhead searchfield="Name" sObjectAPI="Standard_Industry_Code__c" returnfields="Name,SIC_Description__c" />
</aura:component >

basecontroller.js will be like

 handleComponentEvent : function(component, event, helper) {
        console.log('handleComponentEvent success');
        var selectedAccountGetFromEvent='';
    // get the selected Account record from the COMPONETN event 
        try{
        selectedAccountGetFromEvent = event.getParam("recordByEvent"); 
        }catch(err){
            console.log(err.stack);
        }
       // alert('portagroupNew data: '+selectedAccountGetFromEvent);
        var gpacc = component.get("v.groupAccount");
         gpacc.sic=selectedAccountGetFromEvent;
        component.set('v.groupAccount',gpacc);
       // alert('gp sic: '+gpacc.sic); 
 }

c:PortalTypeAhead.cmp

<aura:component >
    <aura:attribute name="searchfield" type="string" />
    <aura:attribute name="sObjectAPI" type="string" />
    <aura:attribute name="returnfields" type="string" />

   
   <aura:handler name="oSelectedRecordEvent" event="c:selectedsObjectRecordEvent" action="{!c.handleComponentEvent}"/>   
    <div class="slds-grid slds-wrap">
        <div class="slds-size_1-of-1">
            <div class="slds-form-element">
                <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                    <lightning:icon class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" iconName="utility:search" size="x-small"/>
                    <input type="text" id="sictxt" class="slds-input searchbar form-control" style="font-size:22px;" placeholder=" Search by SIC code"  onkeyup="{!c.searchKeyChange}"/>
                </div>
            </div>
        </div>
        <div class="slds-size_1-of-1">
            <c:PortalTypeAheadList searchfield="{!v.searchfield}" sObjectAPI="{!v.sObjectAPI}" returnfields="{!v.returnfields}" />
        </div>
    </div>
</aura:component>



PortalTypeAheadcontroller.js

({
    searchKeyChange: function(component, event, helper) {
        var myEvent = $A.get("e.c:PortalTypeAheadEvent");
        myEvent.setParams({"searchKey": event.target.value});
        myEvent.fire();
    }, 
    handleComponentEvent : function(component, event, helper) {
        console.log('handleComponentEvent success');
    // get the selected Account record from the COMPONETN event 
       var selectedAccountGetFromEvent = event.getParam("recordByEvent"); 
        console.log('data: '+selectedAccountGetFromEvent);
        document.getElementById('sictxt').value=selectedAccountGetFromEvent;
       //component.find("sictxt").set("v.selectedRecord" , selectedAccountGetFromEvent);   
 }
})


PortalTypeAheadList.cmp

<aura:component Controller="PortalGroupController">   
    <aura:attribute name="searchfield" type="string" />
    <aura:attribute name="sObjectAPI" type="string" />
    <aura:attribute name="returnfields" type="string" /> 
    <aura:attribute name="hosturl" type="String" />
<aura:handler event="c:PortalTypeAheadEvent" action="{!c.searchKeyChange}" />
    <aura:attribute name="Groups" type="PortalGroupController.CheckCensusWrapper[]" />
    <aura:attribute name="Results" type="Object[]"/>
    <aura:attribute name="oRecord" type="sObject" />
      <aura:registerEvent name="oSelectedRecordEvent" type="c:selectedsObjectRecordEvent"/>
    <Style>
    .search:hover{
        box-shadow: 0 0 11px rgba(33,33,33,.2);
        color:black
    }
    </Style>
    <div aura:id="resultDiv" class="slds-show">
    <aura:iteration items="{!v.Results}" var="result">
             <ui:outputText click="{!c.selectRecord}" class="slds-input slds-box search" value="{!result}"/>
            <!--
            <li data-index="{!ind}" role="presentation" class="slds-box search recordstyle" onclick="{!c.selectRecord}">
                 <span>{!result}</span>
            </li>
-->
            <br />
    </aura:iteration>
    </div>

</aura:component>


PortalTypeAheadListController.js


({
    searchKeyChange: function(component, event) {
        var pillTarget = component.find("resultDiv");
      $A.util.removeClass(pillTarget, 'slds-hide');
      $A.util.addClass(pillTarget, 'slds-show');
       
        var hosturl=decodeURIComponent(window.location.host);
        console.log('hosturl: '+hosturl);
        component.set('v.hosturl',hosturl);
       
        var searchKey = event.getParam("searchKey");
        var action = component.get("c.getTypeAheadData");
        var sobAPI=component.get("v.sObjectAPI");       
        var returnfields=component.get("v.returnfields");
        var searchfield=component.get("v.searchfield");
        console.log('searchKey: '+searchKey);
        action.setParams({
            "searchKey": searchKey,
            "sObjectAPI": sobAPI,
            "returnfields": returnfields,
            "searhfield":searchfield
        });
        action.setCallback(this, function(a) {
           // console.log(JSON.stringify(a.getReturnValue()));
            component.set("v.Results", a.getReturnValue());
        });
        $A.enqueueAction(action);
    },
    selectRecord : function(component, event, helper){
        console.log('selectRecord success');
        try{
      var target = event.getSource(); 
            var txtVal = target.get("v.value") ;
            console.log('Selected Value is '+txtVal); 
    // call the event 
      var compEvent = component.getEvent("oSelectedRecordEvent");
    // set the Selected sObject Record to the event attribute.
         compEvent.setParams({"recordByEvent" : txtVal });
    // fire the event
         compEvent.fire();
             }catch(err){
            console.log(err.stack);
        }
     //hide record
     var pillTarget = component.find("resultDiv");
      $A.util.addClass(pillTarget, 'slds-hide');
      $A.util.removeClass(pillTarget, 'slds-show');
     
    }

})

selectedsObjectRecordEvent.event

<aura:event type="COMPONENT" description="by this event we are pass the selected sObject(lookup list record) in the parent component">
    <aura:attribute name="recordByEvent" type="String"/>
</aura:event>


Apex method will be like


@AuraEnabled
    public static List<String> getTypeAheadData(String searchKey,String sObjectAPI,String returnfields,String searhfield){
        List<String> data=new List<String>();
        String filter1=searchKey.trim();
        String filter=filter1+'%';
        //System.debug('filter :'+filter);
        String qry='SELECT '+returnfields+' FROM '+sObjectAPI+' WHERE '+searhfield+' LIKE :filter';
        System.debug('TypeAheadQuery: '+qry);
        List<String> retfieldslist=new List<String>();
        try{
            if(returnfields.contains(','))
            retfieldslist=returnfields.split(',');
        List<sObject> soblist=Database.query(qry);
            String str='';
            for(sObject s:soblist){
                for(String t:retfieldslist){
                    str+=String.valueOf(s.get(t))+'-';
                }
                str=str.trim();
                str=str.removeEnd('-');
            data.add(str);
                str='';
            }
        }catch(Exception e){
            System.debug('Exception: '+e+'\n'+e.getStackTraceString());
        }
        System.debug('data: '+data);
        return data;       
    }

vlocity - Typeahead block construction example

/*
 author: Balayesu
 description:   This class sets select element values dynamically in Dental questions omniscript
*/
global with sharing class DentalQuestionsOmniscriptController implements vlocity_ins.VlocityOpenInterface {
    public String groupId;
    public Boolean invokeMethod(String methodName, Map<String, Object> input, Map<String, Object> outMap, Map<String, Object> options){
        boolean flag=false;
        System.debug('Setting inputSelect options');
        if(methodName.equals('getSICcodes')){
            flag=getSICcodes(input,outMap,options);
        }
        if(methodName.equals('getSICcodesTypeAhead')){
            flag=getSICcodesTypeAhead(input,outMap,options);
        }
        return flag;
    }
 
//get options for select element
    public boolean getSICcodes(Map<String, Object> input, Map<String, Object> outMap, Map<String, Object> options){
        Map<String,String> dupmap=new Map<String,String>();
         List<Map<String,String>> selectoptions=new List<Map<String,String>>();
        String contacttypes='';
        for(Standard_Industry_Code__c c:[SELECT Name FROM Standard_Industry_Code__c where Name!=null]){
         
            contacttypes+=c.Name+';';
         
        }
     
        List<String> ctlist=new List<String>();
        if(contacttypes.contains(';')){
            for(String s:contacttypes.split(';')){
                if(s!='' && s!=null){
                    if(!dupmap.containsKey(s)){
                        ctlist.add(s);
                        dupmap.put(s,s);
                    }
                }
            }
        }
        System.debug('ctlist :'+ctlist);
        for(String s:ctlist){
            selectoptions.add(new Map<String,String>{'name'=>s,'value'=>s});
        }
        System.debug('selectoptions: '+selectoptions);
        outMap.put('options',selectoptions);
        boolean flag=true;
        return flag;
    }
    public boolean getSICcodesTypeAhead(Map<String, Object> input, Map<String, Object> outMap, Map<String, Object> options){
        Map<String,String> dupmap=new Map<String,String>();
         List<Map<String,String>> selectoptions=new List<Map<String,String>>();
        String contacttypes='';     
        try{
            System.debug('input :'+JSON.serialize(input));
            List<Map<String,String>> lookupoptions=new List<Map<String,String>>();
            String filter1;
            //Fetch individual consumer data
            if(input.containsKey('QuestionsStep')){
                Map<String,Object> stepPA=(Map<String,Object>)input.get('QuestionsStep');
                Map<String,Object> memblock=(Map<String,Object>)stepPA.get('SICTypeAhead-Block');
                filter1=(string)memblock.get('SICTypeAhead');
            }
            filter1=filter1.trim();
            string filter=filter1+'%';
            System.debug('filter :'+filter);
         
            for(Standard_Industry_Code__c c:[SELECT Id,Name,SIC_Description__c  FROM Standard_Industry_Code__c where Name LIKE :filter]){
            lookupoptions.add(new Map<String,String>{'SICId'=>String.valueOf(c.id),'SIC'=>String.valueOf(c.Name + ' - ' +c.SIC_Description__c)});
        }     
            system.debug('suggestions: '+lookupoptions);
            outMap.put('suggestions',lookupoptions);
        }catch(exception ex){
            System.debug('The following exception has occurred: ' + ex.getMessage());
            System.debug('Stacktrace -- The following exception has occurred: ' + ex.getStackTraceString());
        }
        return true;
        //====================end of new code ======================
    }
}



Below is the configuration for the typeahead element