ej2-javascript-samples/src/auto-complete/data-binding.html at master · jesusarockias/ej2-javascript-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<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>
            <input type="text" id='country' />
        </div>
    </div>
    <div id='remote-data' class='col-lg-6' style='padding-top:15px'>
        <div class='content'>
            <h4>Remote Data</h4>
            <input type="text" id='products' />
        </div>
    </div>
</div>
<div class="col-lg-3 property-section">
	<table id="property" title="Properties">
		<tbody>
			<tr>
				<td>
					<input id="checkAutofill" type="checkbox" checked="true">
				</td>
			</tr>
		</tbody>
	</table>
</div>

<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>

<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/ej2-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> More information on the data binding feature configuration can be found in the
        <a href="http://ej2.syncfusion.com/documentation/auto-complete/data-binding.html" target="_blank"> documentation section</a>.
    </p>
</div>

<!-- custom code start -->
<style>
    .content {
        margin: 0 auto;
        width: 250px;
    }
</style>
<!-- custom code end-->