grouping-icon-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/auto-complete/grouping-icon/datasource.js\" type=\"text/javascript\"></script>\n<script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n    <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n    <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n    <style>\n            body{\n                touch-action:none;\n            }\n        </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n    <div id=\"groupList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n        <div class=\"content\">\n            <h4>Grouping</h4>\n            <input type=\"text\" id=\"vegetables\">\n        </div>\n    </div>\n\n    <div id=\"iconList\" class=\"col-lg-6\" style=\"padding-top:15px\">\n        <div class=\"content\">\n            <h4> Icons</h4>\n            <input type=\"text\" id=\"icons\">\n        </div>\n    </div>\n</div>\n\n\n\n\n\n<style>\n    \n\n    .e-list-icon {\n        font-family: 'Socialicons' !important;\n        color: rgba(0, 0, 0, .57);\n    }\n\n    .twitter:before {\n        content: \"\\a701\";\n    }\n\n    .vimeo:before {\n        content: \"\\a702\";\n    }\n\n    .youtube:before {\n        content: \"\\a709\";\n    }\n\n    .whatsapp:before {\n        content: \"\\a700\";\n    }\n\n    .skype:before {\n        content: \"\\a708\";\n    }\n\n    .instagram:before {\n        content: \"\\a703\";\n    }\n\n    .google-plus:before {\n        content: \"\\a706\";\n    }\n\n    .facebook:before {\n        content: \"\\a705\";\n    }\n\n    .tumblr:before {\n        content: \"\\a707\";\n    }\n\n    .linkedin:before {\n        content: \"\\a704\";\n    }\n</style></div></body></html>","index.js":"{{ripple}}\n\n    // initialize AutoComplete component\n    var groupObj = new ej.dropdowns.AutoComplete({\n        //set the local data to dataSource property\n        dataSource: window.ddVegetableData,\n        // map the appropriate columns to fields property\n        fields: { groupBy: 'Category', value: 'Vegetable' },\n        // set the placeholder to AutoComplete input element\n        placeholder: 'e.g. Cabbage',\n        // enabled the popup button to AutoComplete\n        showPopupButton: true\n    });\n    groupObj.appendTo('#vegetables');\n\n    // initialize AutoComplete component\n    var iconObj = new ej.dropdowns.AutoComplete({\n        //set the local data to dataSource property\n        dataSource: window.ddSocialMedia,\n        // map the appropriate columns to fields property\n        fields: { iconCss: 'Class', value: 'SocialMedia' },\n        // set the placeholder to AutoComplete input element\n        placeholder: 'e.g. Facebook',\n        // enabled the popup button to AutoComplete\n        showPopupButton: true\n    });\n    iconObj.appendTo('#icons');\n"}