Ej2 4436 auto complete master

Author: pipeline

src/autocomplete/autocomplete.module.ts

@@ -0,0 +1,49 @@
+import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { AutoCompleteModule } from '@syncfusion/ej2-ng-dropdowns';
+import { CheckBoxModule  } from '@syncfusion/ej2-ng-buttons';
+import { FormsModule }   from '@angular/forms';
+import { DefaultAutoCompleteComponent } from './default.component';
+import { GroupAndIconAutoCompleteComponent } from './groupingicon.component';
+import { DataBindingAutoCompleteComponent } from './databinding.component';
+import { TemplateAutoCompleteComponent } from './template.component';
+import { HighlightAutoCompleteComponent } from './highlight.component';
+import { SharedModule } from '../common/shared.module';
+export const autoCompleteAppRoutes: Object[] = [
+    {
+        path: ':theme/autocomplete/default', component: DefaultAutoCompleteComponent,
+        name: 'Default Functionalities', category: 'AutoComplete'
+    },
+    {
+        path: ':theme/autocomplete/groupingicon', component: GroupAndIconAutoCompleteComponent,
+        name: 'Grouping and Icons', category: 'AutoComplete'
+    },
+    {
+        path: ':theme/autocomplete/databinding', component: DataBindingAutoCompleteComponent,
+        name: 'Data Binding', category: 'AutoComplete'
+    },
+    {
+        path: ':theme/autocomplete/template', component: TemplateAutoCompleteComponent,
+        name: 'Template', category: 'AutoComplete'
+    },
+    {
+        path: ':theme/autocomplete/highlight', component: HighlightAutoCompleteComponent,
+        name: 'Highlight', category: 'AutoComplete'
+    }
+];
+
+export const AutoCompleteRouter: ModuleWithProviders = RouterModule.forChild(autoCompleteAppRoutes);
+
+@NgModule({
+    imports: [AutoCompleteRouter, AutoCompleteModule, SharedModule, CheckBoxModule, FormsModule],
+    declarations: [
+        DefaultAutoCompleteComponent,
+        GroupAndIconAutoCompleteComponent,
+        DataBindingAutoCompleteComponent,
+        TemplateAutoCompleteComponent,
+        HighlightAutoCompleteComponent
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AutoCompleteSampleModule {
+}

src/autocomplete/databinding-plnkr.json

@@ -0,0 +1 @@
+{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n    imports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ],\n     \n    exports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ]\n})\nexport class SharedModule { }\n","app.module":"import { DataBindingAutoCompleteComponent } from './databinding.component';\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\nimport { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\n\nimport { AutoCompleteModule } from '@syncfusion/ej2-ng-dropdowns';\nimport { CheckBoxModule  } from '@syncfusion/ej2-ng-buttons';\nimport { FormsModule }   from '@angular/forms';\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n@NgModule({\n    imports: [AutoCompleteModule, SharedModule, CheckBoxModule, FormsModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [DataBindingAutoCompleteComponent],\nbootstrap: [DataBindingAutoCompleteComponent]\n})\nexport class AppModule { }","databinding.component":"/**\n * AutoComplete Remote-Data & Local-Data Samples\n */\nimport { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';\nimport { AutoCompleteComponent } from '@syncfusion/ej2-ng-dropdowns';\nimport { CheckBoxComponent } from '@syncfusion/ej2-ng-buttons';\n\n@Component({\n    selector: 'control-content',\n    templateUrl: 'databinding.html',\n    styleUrls: ['databinding.css'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class DataBindingAutoCompleteComponent {\n    @ViewChild('local')\n    public localObj: AutoCompleteComponent;\n    @ViewChild('remote')\n    public remoteObj: AutoCompleteComponent;\n    @ViewChild('checkbox')\n    public checkboxObj: CheckBoxComponent;\n    public 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    public localFields: Object = { value: 'name' };\n    public localWaterMark: string = 'e.g. Australia';\n    public data: DataManager = new DataManager({\n        url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Products',\n        adaptor: new ODataV4Adaptor,\n        crossDomain: true\n    });\n    public suggestionCount: number = 5;\n    public query: Query = new Query().select(['ProductID', 'ProductName']);\n    public remoteFields: Object = { text: 'ProductName', value: 'ProductID' };\n    public remoteWaterMark: string = 'e.g. Alice Mutton';\n    public loader: HTMLElement;\n    public onActionBegin(): void {\n        let spinner: HTMLElement = <HTMLElement>document.querySelector('.e-spinner-icon');\n        if (!spinner) {\n            this.loader = <HTMLElement>document.querySelectorAll('.e-clear-icon')[1];\n            this.loader.classList.remove('e-clear-icon');\n            this.loader.classList.add('e-spinner-icon');\n            this.loader.classList.add('e-input-group-icon');\n        }\n    }\n    public onActionComplete(): void {\n        this.loader.classList.remove('e-spinner-icon');\n        this.loader.classList.remove('e-input-group-icon');\n        this.loader.classList.add('e-clear-icon');\n    }\n    public onActionFailure(): void {\n        this.onActionComplete();\n    }\n    public onChange(): void {\n        this.localObj.autofill = this.checkboxObj.checked;\n        this.remoteObj.autofill = this.checkboxObj.checked;\n    }\n}\n","databinding.html":"<div class=\"control-section\">\n    <div class=\"col-lg-9 content-wrapper\">\n        <div id='local' class='col-lg-6' style=\"margin: 0 auto;padding-top: 15px;\">\n            <div style=\"width: 250px;margin: 0 auto;\">\n                <h4> Local Data</h4>\n                <ej-autocomplete id='country' #local [dataSource]='countries' [autofill]='true' [fields]='localFields' filterType='StartsWith'\n                    [placeholder]='localWaterMark'></ej-autocomplete>\n            </div>\n        </div>\n        <div id='remote' class='col-lg-6' style=\"margin: 0 auto;padding-top: 15px;\">\n            <div style=\"width: 250px; margin: 0 auto;\">\n                <h4>Remote Data</h4>\n                <ej-autocomplete id='products' #remote [dataSource]='data' [suggestionCount]='suggestionCount' (actionFailure)='onActionFailure()'\n                    filterType='StartsWith' (actionComplete)='onActionComplete()' (actionBegin)='onActionBegin()' [fields]='remoteFields'\n                    [autofill]='true' [query]='query' [placeholder]='remoteWaterMark' sortOrder='Ascending'></ej-autocomplete>\n            </div>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <div class=\"property-panel-section\">\n            <div class=\"property-panel-header\">Properties</div>\n            <div class=\"property-panel-content\">\n                <div id=\"property\" class=\"property-panel-table\" title=\"Properties\">\n                    <div style=\"margin-left: 50px; padding-top:25px;\">\n                        <ej-checkbox #checkbox label=\"Autofill\" [checked]=\"true\" (change)=\"onChange()\"></ej-checkbox>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n","databinding.css":".property-panel-content {\n    padding: 0 10px 10px 0;\n}\n\n.content {\n    width: 43%;\n    margin: 0 auto;\n    min-width: 185px;\n    padding: 25px 0px;\n}\n\n.control-label {\n    padding: 24px 0px 0px 0px;\n    font-size: 12px;\n    opacity: 0.54;\n}\n\n.control-section,\n.content-wrapper {\n    min-height: 350px;\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.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}","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/[email protected]\"></script>\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    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","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        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.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-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        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

src/autocomplete/databinding.component.ts

@@ -0,0 +1,76 @@
+/**
+ * AutoComplete Remote-Data & Local-Data Samples
+ */
+import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { AutoCompleteComponent } from '@syncfusion/ej2-ng-dropdowns';
+import { CheckBoxComponent } from '@syncfusion/ej2-ng-buttons';
+
+@Component({
+    selector: 'control-content',
+    templateUrl: 'databinding.html',
+    styleUrls: ['databinding.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class DataBindingAutoCompleteComponent {
+    @ViewChild('local')
+    public localObj: AutoCompleteComponent;
+    @ViewChild('remote')
+    public remoteObj: AutoCompleteComponent;
+    @ViewChild('checkbox')
+    public checkboxObj: CheckBoxComponent;
+    public countries: { [key: string]: Object; }[] = [
+        { name: 'Australia', code: 'AU' },
+        { name: 'Bermuda', code: 'BM' },
+        { name: 'Canada', code: 'CA' },
+        { name: 'Cameroon', code: 'CM' },
+        { name: 'Denmark', code: 'DK' },
+        { name: 'France', code: 'FR' },
+        { name: 'Finland', code: 'FI' },
+        { name: 'Germany', code: 'DE' },
+        { name: 'Greenland', code: 'GL' },
+        { name: 'Hong Kong', code: 'HK' },
+        { name: 'India', code: 'IN' },
+        { name: 'Italy', code: 'IT' },
+        { name: 'Japan', code: 'JP' },
+        { name: 'Mexico', code: 'MX' },
+        { name: 'Norway', code: 'NO' },
+        { name: 'Poland', code: 'PL' },
+        { name: 'Switzerland', code: 'CH' },
+        { name: 'United Kingdom', code: 'GB' },
+        { name: 'United States', code: 'US' }
+    ];
+    public localFields: Object = { value: 'name' };
+    public localWaterMark: string = 'e.g. Australia';
+    public data: DataManager = new DataManager({
+        url: 'http://services.odata.org/V4/Northwind/Northwind.svc/Products',
+        adaptor: new ODataV4Adaptor,
+        crossDomain: true
+    });
+    public suggestionCount: number = 5;
+    public query: Query = new Query().select(['ProductID', 'ProductName']);
+    public remoteFields: Object = { text: 'ProductName', value: 'ProductID' };
+    public remoteWaterMark: string = 'e.g. Alice Mutton';
+    public loader: HTMLElement;
+    public onActionBegin(): void {
+        let spinner: HTMLElement = <HTMLElement>document.querySelector('.e-spinner-icon');
+        if (!spinner) {
+            this.loader = <HTMLElement>document.querySelectorAll('.e-clear-icon')[1];
+            this.loader.classList.remove('e-clear-icon');
+            this.loader.classList.add('e-spinner-icon');
+            this.loader.classList.add('e-input-group-icon');
+        }
+    }
+    public onActionComplete(): void {
+        this.loader.classList.remove('e-spinner-icon');
+        this.loader.classList.remove('e-input-group-icon');
+        this.loader.classList.add('e-clear-icon');
+    }
+    public onActionFailure(): void {
+        this.onActionComplete();
+    }
+    public onChange(): void {
+        this.localObj.autofill = this.checkboxObj.checked;
+        this.remoteObj.autofill = this.checkboxObj.checked;
+    }
+}

src/autocomplete/databinding.css

@@ -0,0 +1,36 @@
+.property-panel-content {
+    padding: 0 10px 10px 0;
+}
+
+.content {
+    width: 43%;
+    margin: 0 auto;
+    min-width: 185px;
+    padding: 25px 0px;
+}
+
+.control-label {
+    padding: 24px 0px 0px 0px;
+    font-size: 12px;
+    opacity: 0.54;
+}
+
+.control-section,
+.content-wrapper {
+    min-height: 350px;
+}
+
+.e-input-group .e-input-group-icon.e-spinner-icon {
+    background-image: url(./styles/images/Medium-36px-spin.gif) !important;
+    background-size: 12px 12px !important;
+    background-repeat: no-repeat !important;
+    background-position: center center !important;
+    top: -2px;
+}
+.e-input-group .e-spinner-icon.e-input-group-icon:active {
+    background: transparent;
+}
+
+.e-input-group.e-ddl .e-input-group-icon.e-spinner-icon {
+    border: none;
+}