the Autocomplete control is not visible but I can see it in page inspector

[Ryan]

I have an Autocomplete control on a cshtml page.

<div class="card card-info">
    <div class="card-header">Select a New Location AND / OR Mark Inactive</div>
    <div class="card-body">

        <div>
            <ejs-autocomplete id="autoLocation" placeholder="Start typing..." popupHeight="220px">
                <e-data-manager adaptor="WebApiAdaptor" url="/Home/getlocationlist" crossDomain="false"></e-data-manager>
                <e-autocomplete-fields value="LocationName"></e-autocomplete-fields>
            </ejs-autocomplete>
        </div>

            <br />
            <label for='chkInactive'>Mark Inactive</label>
            <input type='checkbox' id='chkInactive' class='form-control' />
        </div>
    </div>

I have the required references to the material css, and the ejs script file on the layout.cshtml.

For some reason, I cannot see the Autocomplete control on the page when it runs but I can see the markup when I inspect the page with web developer tools.

Thoughts?

[Sevvandhi Nagulan]

Hi Ryan, 

Greetings from Syncfusion support. 

We checked the reported requirement. We made sample with the mentioned code and we cannot reproduce the issue. Here we have attached the ensured sample. Kindly check with the attached sample and provide an issue replicating sample by modifying the below attached sample that will help us to further validate the issue and provide you with a better solution from our end. 

Please find the sample below, 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_WebApiAdaptor2092557013 

Also, please ensure that whether you have added the <ejs-scripts> at the body of the element. Please refer the below UG link. 

https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/vscode/#configure-essential-js-2-in-the-application 

Please let us know if you need further assistance. 

Regards, 

Sevvandhi N