DataBinding.cshtml

@using Syncfusion.EJ2
@section ControlsSection{
<div class="control-section col-lg-9">
    <div id='local-data' class='col-lg-6' style='padding-top:15px'>
        <div class='content'>
            <h4> Local Data</h4>
            <ejs-autocomplete id="country" dataSource="@ViewBag.localdata" placeholder="e.g. Australia" autofill="true" filterType="StartsWith" sortOrder="@ViewBag.sort">
                <e-autocomplete-fields value="Name"></e-autocomplete-fields>
            </ejs-autocomplete>
        </div>
    </div>
    <div id='remote-data' class='col-lg-6' style='padding-top:15px'>
        <div class='content'>
            <h4>Remote Data</h4>
            <ejs-autocomplete id="products" placeholder="e.g. Andrew Fuller" autofill="true" suggestionCount="5" filterType="StartsWith" sortOrder="@ViewBag.sort" query="new ej.data.Query().select(['FirstName', 'EmployeeID']).requiresCount()">
                <e-data-manager adaptor="WebApiAdaptor" url="https://ej2services.syncfusion.com/production/web-services/api/Employees" crossDomain="true"></e-data-manager>
                <e-autocomplete-fields value="FirstName"></e-autocomplete-fields>
            </ejs-autocomplete>
        </div>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div id="property" title="Properties">
        <div style='padding-top:25px;'>
            <ejs-checkbox id="checkAutofill" checked="true" label="Autofill" change="change"></ejs-checkbox>
        </div>
    </div>
</div>

    <script type="text/javascript">
        function change(args) {
            var country = document.getElementById('country').ej2_instances[0];
            var products = document.getElementById('products').ej2_instances[0];
            country.autofill = args.checked;
            products.autofill = args.checked;
        }
    </script>
}
@section Meta{
    <meta name="description" content="This example demonstrates how to bind with local data source and fetch data from remote data service in the ASP.NET Core autocomplete control."/>
}
@section ActionDescription{
    <div id="action-description">
        <p>
            This sample demonstrates the different data binding supports of the AutoComplete. Type a character(s) in the AutoComplete element and the remaining characters are automatically filled based on the first matched item.
            Also, provided option to enable/disable this <code>autofill</code> feature in the property panel.
        </p>
    </div>
}
@section Description{
    <div id="description">
        <p>The AutoComplete loads the data either from local data sources or remote data services through the <code>dataSource</code> property. It supports the data type of <code>array</code> or <code>DataManager</code>.</p>
        <p>
            The DataManager, that act as an interface between service endpoint and AutoComplete, will require the follwoing minimal
            information to interact with the service endpoint properly.
        </p>
        <ul>
            <li><code>DataManager->url</code> - Defines the service endpoint to fetch data.</li>
            <li>
                <code>DataManager->adaptor</code> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for
                remote binding.
            </li>
        </ul>
        <p>
            The adaptor is responsible for processing response and request from/to the service endpoint.
            <code>syncfusion/ejs-data</code> package provides some predefined adaptors that are designed to interact with particular
            service endpoints. They are:
        </p>
        <ul>
            <li><code>UrlAdaptor</code> - Use this to interact any remote services.</li>
            <li><code>ODataAdaptor</code> - Use this to interact with OData endpoints.</li>
            <li><code>ODataV4Adaptor</code> - Use this to interact with OData V4 endpoints.</li>
            <li><code>WebApiAdaptor</code> - Use this to interact with Web API created under OData standards.</li>
            <li><code>WebMethodAdaptor</code> - Use this to interact with web methods.</li>
        </ul>
        <p>
            In this sample, the local data is bound to a collection of sports data and the remote data is bound to a collection of
            customer data as an instance of <code>DataManager</code>. Also, provided option to enable/disable <code>autofill</code>        feature in the property panel.
            <code>StartsWith</code> filter type is set in this sample for showcase the autofill behavior.
        </p>
        <p>
            More information on the data binding feature configuration can be found in the
            <a href="https://ej2.syncfusion.com/aspnetcore/documentation/auto-complete/data-binding/" target="_blank"> documentation section</a>.
        </p>
    </div>
}