How to implement Lookup field using Lightning:recordEditForm in Lightning Out in Visualforce Page (classic)?

Question

I have a lightning component in a visualforce page with a look up field but whenever the user clicks on search icon or search it throws and error :

This page has an error. You might just need to refresh it. [PromiseRejection: [Cannot read property 'la' of undefined]]

I referred this documentation, and it says in lightning out it won't show the search dialog or look up box.

This is my component code for the field :

<aura:iteration items="{!v.docList}" var="acc" indexVar="index">
<lightning:recordEditForm aura:id="docmancommunicationform" objectApiName="Docman_Communication__c" >  
<lightning:messages />
<div class="slds-grid slds-gutters">
    <div class="slds-p-right_small"></div>
    <div class="slds_col slds-size_1-of-6" aura:id="dependentnamediv" ><!--class="{!(acc.Select__c == 'Dependent') ?'slds_col slds-size_1-of-7' : 'slds_col slds-size_1-of-7 slds-hide'}"-->
    <span><lightning:inputfield  aura:id="dependentname" fieldName="Dependent__c" value="{!acc.Dependent__c}"/></span></div>

Screenshot of the Error :

Is there any alternate to implement the look up search dialog in lightning out?

Note : I have a dynamic row implementation where users can add/remove rows.

UPDATED CODE to Replace lightning:intputfield with Force:Inputfield :

Component :

  <aura:attribute name="docList" type="Docman_Communication__c[]" />
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<tbody>     
   <aura:iteration items="{!v.docList}" var="acc" indexVar="index">
          <lightning:recordEditForm aura:id="docmancommunicationform" objectApiName="Docman_Communication__c" >  
           <lightning:messages />
           <div class="slds-grid slds-gutters">
                <div class="slds_col slds-size_1-of-6" aura:id="indexvalue" style="text-align: center;">
                     <div class="slds-p-top_large"></div>
                           <span>{!index + 1}</span></div>
                     <div class="slds_col slds-size_1-of-6" aura:id="dependentnamediv" ><!--class="{!(acc.Select__c == 'Dependent') ?'slds_col slds-size_1-of-7' : 'slds_col slds-size_1-of-7 slds-hide'}"-->
                     <span><force:inputField  aura:id="dependentname" value="{!acc.Dependent__c}"/></span></div>
                     <div class="slds-p-right_small"></div>
                     <div class="slds_col slds-size_1-of-6">
                                                    <span><lightning:inputField fieldName="Rejected_Type__c" value="{!acc.Rejected_Type__c}"/></span>
                                                </div>
                                                <div class="slds-p-right_small"></div>
                                                <div class="slds_col slds-size_1-of-6">
                                                    <span><lightning:inputField aura:id='reason' fieldName="Rejected_Reason__c" value="{!acc.Rejected_Reason__c}"/></span>
                                                </div>

HELPER to Add Row and instance of Docman Communicaiton :

 addrow: function(component) {
 var docobj = component.get("v.docList");
   console.log('docobj'+JSON.stringify(docobj));
    var contactid = component.get("v.contactid");
    var rowItemList = component.get("v.docList");
    rowItemList.push({ 'sobjectType': 'Docman_Communication__c','Select__c':'','PrimaryInformation__c': contactid,'Email_Merge_Field__c':'','SMS_Merge_Field__c':'','DocMan__c':'','Dependent__c':'','Rejected_Type__c': '','Rejected_Reason__c': '',
                       'Deadline__c':''});
    component.set("v.docList", rowItemList);

},

After updating it to force:inputField it does not show the field any more,

Answer 1

i used force:inputField for look up inside lightning:recordEditForm but i just tested in standaloneapp only, please try below code and let me know

cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes">

    <aura:attribute name="newContact" type="Contact" default="{ 'sobjectType': 'Contact'}"/>

    <!-- Display the new contact form -->
    <div class="Create Contact">
        <lightning:card iconName="action:new_contact" title="Create Contact">
            <lightning:recordEditForm
                                      onsubmit="{!c.handleSubmit}"
                                      onerror ="{!c.handlerror}"
                                      objectApiName="Contact">
                <lightning:messages />
                <lightning:inputField class="slds-col slds-size_1-of-3 slds-p-horizontal_x-small" fieldName="AssistantName" value="{!v.newContact.AssistantName}"></lightning:inputField>
                <lightning:inputField class="slds-col slds-size_1-of-3 slds-p-horizontal_x-small" fieldName="Age__c" value="{!v.newContact.Age__c}"></lightning:inputField>
                <div class="slds-col slds-size_1-of-3 slds-p-horizontal_x-small">
                    <force:inputField  aura:id="lookup" value="{!v.newContact.AccountId}"/>
                </div>

                <lightning:button class="slds-m-top_small" variant="brand" name="update" type="submit" label="Save"  />
            </lightning:recordEditForm>
        </lightning:card>
    </div>

</aura:component>