Skip to content

Commit cc1baa7

Browse files
author
pipeline
committed
Ej2 4436 auto complete master
1 parent 888e376 commit cc1baa7

33 files changed

+765
-18
lines changed

‎src/autocomplete/databinding-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * AutoComplete Remote-Data & Local-Data Samples\n */\nimport { AutoComplete } from '@syncfusion/ej2-dropdowns';\nimport { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\nimport { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';\n\n\n let countries: { [key: string]: Object; }[] = [\n { name: 'Australia', code: 'AU' },\n { name: 'Bermuda', code: 'BM' },\n { name: 'Canada', code: 'CA' },\n { name: 'Cameroon', code: 'CM' },\n { name: 'Denmark', code: 'DK' },\n { name: 'France', code: 'FR' },\n { name: 'Finland', code: 'FI' },\n { name: 'Germany', code: 'DE' },\n { name: 'Greenland', code: 'GL' },\n { name: 'Hong Kong', code: 'HK' },\n { name: 'India', code: 'IN' },\n { name: 'Italy', code: 'IT' },\n { name: 'Japan', code: 'JP' },\n { name: 'Mexico', code: 'MX' },\n { name: 'Norway', code: 'NO' },\n { name: 'Poland', code: 'PL' },\n { name: 'Switzerland', code: 'CH' },\n { name: 'United Kingdom', code: 'GB' },\n { name: 'United States', code: 'US' }\n ];\n let loader: HTMLElement;\n let atcObj1: AutoComplete = new AutoComplete({\n dataSource: new DataManager({\n url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Products',\n adaptor: new ODataV4Adaptor,\n crossDomain: true\n }),\n suggestionCount: 5,\n query: new Query().select(['ProductID', 'ProductName']),\n fields: { value: 'ProductName' },\n placeholder: 'e.g. Alice Mutton',\n sortOrder: 'Ascending',\n autofill: true,\n filterType: 'StartsWith',\n actionBegin: () => {\n let spinner: HTMLElement = <HTMLElement>document.querySelector('.e-spinner-icon');\n if (!spinner) {\n loader = <HTMLElement>document.querySelectorAll('.e-clear-icon')[1];\n loader.classList.remove('e-clear-icon');\n loader.classList.add('e-spinner-icon');\n loader.classList.add('e-input-group-icon');\n }\n },\n actionComplete: () => {\n removeIcon();\n },\n actionFailure: () => {\n removeIcon();\n }\n });\n atcObj1.appendTo('#products');\n let atcObj2: AutoComplete = new AutoComplete({\n dataSource: countries,\n fields: { value: 'name' },\n placeholder: 'e.g. Australia',\n sortOrder: 'Ascending',\n filterType: 'StartsWith',\n autofill: true\n });\n atcObj2.appendTo('#country');\n\n let checkBoxObj: CheckBox = new CheckBox({\n checked: true,\n label: 'Autofill',\n change: (args: ChangeEventArgs) => {\n atcObj1.autofill = args.checked;\n atcObj2.autofill = args.checked;\n }\n });\n checkBoxObj.appendTo('#checkAutofill');\n function removeIcon(): void {\n loader.classList.remove('e-spinner-icon');\n loader.classList.remove('e-input-group-icon');\n loader.classList.add('e-clear-icon');\n }\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"control-section col-lg-9\">\n <div id=\"local-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4> Local Data</h4>\n <input type=\"text\" id=\"country\">\n </div>\n </div>\n <div id=\"remote-data\" class=\"col-lg-6\" style=\"padding-top:15px\">\n <div class=\"content\">\n <h4>Remote Data</h4>\n <input type=\"text\" id=\"products\">\n </div>\n </div>\n</div>\n<div class=\"col-lg-3 property-section\">\n <div id=\"property\" title=\"Properties\">\n <div style=\"margin-left: 50px; padding-top:25px;\">\n <input id=\"checkAutofill\" type=\"checkbox\" checked=\"true\">\n </div>\n </div>\n</div>\n\n\n<style>\n .content {\n margin: 0 auto;\n width: 250px;\n }\n\n .e-input-group .e-input-group-icon.e-spinner-icon {\n background-image: url(./styles/images/Medium-36px-spin.gif) !important;\n background-size: 12px 12px !important;\n background-repeat: no-repeat !important;\n background-position: center center !important;\n top: -2px;\n }\n\n .e-input-group .e-spinner-icon.e-input-group-icon:active {\n background: transparent;\n }\n\n .e-input-group.e-ddl .e-input-group-icon.e-spinner-icon {\n border: none;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/autocomplete/databinding.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<div class="control-section col-lg-9">
2+
<div id='local-data' class='col-lg-6' style='padding-top:15px'>
3+
<div class='content'>
4+
<h4> Local Data</h4>
5+
<input type="text" id='country' />
6+
</div>
7+
</div>
8+
<div id='remote-data' class='col-lg-6' style='padding-top:15px'>
9+
<div class='content'>
10+
<h4>Remote Data</h4>
11+
<input type="text" id='products' />
12+
</div>
13+
</div>
14+
</div>
15+
<div class="col-lg-3 property-section">
16+
<div id="property" title="Properties">
17+
<div style='margin-left: 50px; padding-top:25px;'>
18+
<input id="checkAutofill" type="checkbox" checked='true'>
19+
</div>
20+
</div>
21+
</div>
22+
23+
<div id="description">
24+
<p>The AutoComplete loads the data either from local data sources or remote data services which is through the <code>dataSource</code> property. It supports the data type of <code>array</code> or <code>DataManager</code>.</p>
25+
<p>The DataManager, which will act as an interface between service endpoint and AutoComplete, will require the below minimal
26+
information to interact with service endpoint properly.
27+
</p>
28+
<ul>
29+
<li><code>DataManager->url</code> - Defines the service endpoint to fetch data</li>
30+
<li><code>DataManager->adaptor</code> - Defines the adaptor option. By default, <code>ODataAdaptor</code> is used for
31+
remote binding.</li>
32+
</ul>
33+
<p>The adaptor is responsible for processing response and request from/to the service endpoint.
34+
<code>@syncfusion/ej2-data</code> package provides some predefined adaptors which are designed to interact with particular
35+
service endpoints. They are,</p>
36+
<ul>
37+
<li><code>UrlAdaptor</code> - Use this to interact any remote services.</li>
38+
<li><code>ODataAdaptor</code> - Use this to interact with OData endpoints.</li>
39+
<li><code>ODataV4Adaptor</code> - Use this to interact with OData V4 endpoints.</li>
40+
<li><code>WebApiAdaptor</code> - Use this to interact with Web API created under OData standards.</li>
41+
<li><code>WebMethodAdaptor</code> - Use this to interact with web methods.</li>
42+
</ul>
43+
<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
44+
customer data as an instance of <code>DataManager</code>. Also, provided option to enable/disable <code>autofill</code> feature in the property panel.
45+
<code>StartsWith</code> filter type is set in this sample for showcase the autofill behavior.
46+
</p>
47+
<p> More information on the data binding feature configuration can be found in this
48+
<a href="../documentation/auto-complete/data-binding.html" target="_blank"> documentation section</a>.
49+
</p>
50+
</div>
51+
<style>
52+
.content {
53+
margin: 0 auto;
54+
width: 250px;
55+
}
56+
57+
.e-input-group .e-input-group-icon.e-spinner-icon {
58+
background-image: url(./styles/images/Medium-36px-spin.gif) !important;
59+
background-size: 12px 12px !important;
60+
background-repeat: no-repeat !important;
61+
background-position: center center !important;
62+
top: -2px;
63+
}
64+
65+
.e-input-group .e-spinner-icon.e-input-group-icon:active {
66+
background: transparent;
67+
}
68+
69+
.e-input-group.e-ddl .e-input-group-icon.e-spinner-icon {
70+
border: none;
71+
}
72+
</style>

‎src/autocomplete/databinding.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/**
2+
* AutoComplete Remote-Data & Local-Data Samples
3+
*/
4+
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
5+
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
6+
import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
7+
8+
this.default = () => {
9+
let countries: { [key: string]: Object; }[] = [
10+
{ name: 'Australia', code: 'AU' },
11+
{ name: 'Bermuda', code: 'BM' },
12+
{ name: 'Canada', code: 'CA' },
13+
{ name: 'Cameroon', code: 'CM' },
14+
{ name: 'Denmark', code: 'DK' },
15+
{ name: 'France', code: 'FR' },
16+
{ name: 'Finland', code: 'FI' },
17+
{ name: 'Germany', code: 'DE' },
18+
{ name: 'Greenland', code: 'GL' },
19+
{ name: 'Hong Kong', code: 'HK' },
20+
{ name: 'India', code: 'IN' },
21+
{ name: 'Italy', code: 'IT' },
22+
{ name: 'Japan', code: 'JP' },
23+
{ name: 'Mexico', code: 'MX' },
24+
{ name: 'Norway', code: 'NO' },
25+
{ name: 'Poland', code: 'PL' },
26+
{ name: 'Switzerland', code: 'CH' },
27+
{ name: 'United Kingdom', code: 'GB' },
28+
{ name: 'United States', code: 'US' }
29+
];
30+
let loader: HTMLElement;
31+
let atcObj1: AutoComplete = new AutoComplete({
32+
dataSource: new DataManager({
33+
url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Products',
34+
adaptor: new ODataV4Adaptor,
35+
crossDomain: true
36+
}),
37+
suggestionCount: 5,
38+
query: new Query().select(['ProductID', 'ProductName']),
39+
fields: { value: 'ProductName' },
40+
placeholder: 'e.g. Alice Mutton',
41+
sortOrder: 'Ascending',
42+
autofill: true,
43+
filterType: 'StartsWith',
44+
actionBegin: () => {
45+
let spinner: HTMLElement = <HTMLElement>document.querySelector('.e-spinner-icon');
46+
if (!spinner) {
47+
loader = <HTMLElement>document.querySelectorAll('.e-clear-icon')[1];
48+
loader.classList.remove('e-clear-icon');
49+
loader.classList.add('e-spinner-icon');
50+
loader.classList.add('e-input-group-icon');
51+
}
52+
},
53+
actionComplete: () => {
54+
removeIcon();
55+
},
56+
actionFailure: () => {
57+
removeIcon();
58+
}
59+
});
60+
atcObj1.appendTo('#products');
61+
let atcObj2: AutoComplete = new AutoComplete({
62+
dataSource: countries,
63+
fields: { value: 'name' },
64+
placeholder: 'e.g. Australia',
65+
sortOrder: 'Ascending',
66+
filterType: 'StartsWith',
67+
autofill: true
68+
});
69+
atcObj2.appendTo('#country');
70+
71+
let checkBoxObj: CheckBox = new CheckBox({
72+
checked: true,
73+
label: 'Autofill',
74+
change: (args: ChangeEventArgs) => {
75+
atcObj1.autofill = args.checked;
76+
atcObj2.autofill = args.checked;
77+
}
78+
});
79+
checkBoxObj.appendTo('#checkAutofill');
80+
function removeIcon(): void {
81+
loader.classList.remove('e-spinner-icon');
82+
loader.classList.remove('e-input-group-icon');
83+
loader.classList.add('e-clear-icon');
84+
}
85+
};

‎src/autocomplete/default-plnkr.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"index.ts":"import { enableRipple } from '@syncfusion/ej2-base';\nenableRipple(true);\n/**\n * AutoComplete Default functionality Sample\n */\nimport { AutoComplete } from '@syncfusion/ej2-dropdowns';\n\n\n let sportsData: string[] = ['Badminton', 'Basketball', 'Cricket',\n 'Football', 'Golf', 'Gymnastics',\n 'Hockey', 'Rugby', 'Snooker', 'Tennis'];\n let atcObj: AutoComplete = new AutoComplete({\n dataSource: sportsData,\n value: 'Basketball',\n placeholder: 'e.g. Basketball'\n });\n atcObj.appendTo('#games');\n","index.html":"<!DOCTYPE html><html><head>\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n</head>\n<body>\n<div class=\"col-lg-12 control-section\">\n <div class=\"control-wrapper\">\n <div style=\"padding-top:70px;\">\n <input type=\"text\" id=\"games\" tabindex=\"1\">\n </div>\n </div>\n</div>\n\n<style>\n .control-wrapper {\n margin: 0 auto;\n width: 250px;\n }\n</style>\n\n</body></html>","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\"\n },\n map: {\n main: \"index.ts\",\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n 'plugin-json':'https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js',\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\", \n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\", \n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\", \n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\"\n },\n meta: { \n '*.json': { loader: 'plugin-json' }\n }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

‎src/autocomplete/default.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="col-lg-12 control-section">
2+
<div class="control-wrapper">
3+
<div style='padding-top:70px;'>
4+
<input type="text" id="games" tabindex="1" />
5+
</div>
6+
</div>
7+
</div>
8+
<div id="description">
9+
<p>The <code>AutoComplete</code> component provides the matched suggestion list when type into the input, from which the
10+
user can select one.</p> By default, the filter type value is <code>contains</code>.
11+
<p>The default sample illustrate the use of AutoComplete that allowing end-users to select an item from suggestion list.
12+
Also, provided the option for change the search <code>filterType</code> in the property panel.
13+
</p>
14+
<p> More information on the AutoComplete instantiation can be found in this
15+
<a href="../documentation/auto-complete/getting-started.html" target="_blank"> documentation section</a>.
16+
</p>
17+
</div>
18+
<style>
19+
.control-wrapper {
20+
margin: 0 auto;
21+
width: 250px;
22+
}
23+
</style>

‎src/autocomplete/default.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* AutoComplete Default functionality Sample
3+
*/
4+
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
5+
6+
this.default = () => {
7+
let sportsData: string[] = ['Badminton', 'Basketball', 'Cricket',
8+
'Football', 'Golf', 'Gymnastics',
9+
'Hockey', 'Rugby', 'Snooker', 'Tennis'];
10+
let atcObj: AutoComplete = new AutoComplete({
11+
dataSource: sportsData,
12+
value: 'Basketball',
13+
placeholder: 'e.g. Basketball'
14+
});
15+
atcObj.appendTo('#games');
16+
};

0 commit comments

Comments
 (0)