template-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/auto-complete/template/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\" style=\"height: 400px;\">\n    <div class=\"control-wrapper\">\n        <div style=\"padding-top:70px;\">\n            <input type=\"text\" tabindex=\"1\" id=\"employees\">\n        </div>\n    </div>\n</div>\n\n\n\n\n\n<style>\n    .control-wrapper {\n        margin: 0 auto;\n        width: 300px;\n    }\n\n    .header {\n        font-weight: 600;\n        color: rgba(0, 0, 0, .54);\n        height: 48px;\n        padding: 15px 0 0 16px;\n        font-size: 16px;\n        background-color: #f5f5f5;\n        font-family: \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\";\n    }\n\n\n    .info {\n        margin-left: 17px;\n    }\n\n    .ename {\n        display: block !important;\n        opacity: .87;\n        font-size: 16px;\n        margin-top: 8px;\n    }\n\n    .job {\n        opacity: .54;\n        font-size: 14px;\n        margin-top: -15px;\n        margin-bottom: 7px;\n    }\n\n    .empImage {\n        margin: 6px 16px;\n        float: left;\n        width: 50px;\n        height: 50px;\n    }\n\n    #employees_popup.e-popup .e-list-item * {\n        display: block;\n        text-indent: 0;\n    }\n\n    .e-bigger:not(.bootstrap) #employees_popup .e-dropdownbase .e-list-item {\n        line-height: 42px;\n        height: 80px;\n    }\n\n    .e-bigger:not(.bootstrap) #employees_popup.e-popup .empImage {\n        margin: 10px 16px;\n    }\n</style></div></body></html>","index.js":"{{ripple}}\n\n    // initialize AutoComplete component\n    var atcObj = new ej.dropdowns.AutoComplete({\n        // set the local data to dataSource property\n        dataSource: window.ddEmployeesList,\n        // map the appropriate columns to fields property\n        fields: { value: 'Name' },\n        // set the template content for popup header element\n        headerTemplate:\n        '<div class=\"header\"> <span>Photo</span> <span class=\"info\">Employee Info</span></div>',\n        // set the template content for list items\n        itemTemplate: '<div><img class=\"empImage\" src=\"styles/images/Employees/${Eimg}.png\" alt=\"employee\"/>' +\n            '<div class=\"ename\"> ${Name} </div><div class=\"job\"> ${Designation} </div></div>',\n        // set the placeholder to AutoComplete input element\n        placeholder: 'e.g. Andrew Fuller',\n        // set the height of the popup element\n        popupHeight: '450px'\n    });\n    atcObj.appendTo('#employees');\n"}