highlight-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/auto-complete/highlight/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-8 control-section\">\n    <div class=\"control-wrapper\">\n        <div style=\"padding-top:70px;\">\n            <input type=\"text\" id=\"country\" tabindex=\"1\">\n        </div>\n    </div>\n</div>\n\n<div class=\"col-lg-4 property-section\">\n    <table id=\"property\" title=\"Properties\" style=\"width: 100%;\">\n        <tbody><tr>\n            <td class=\"left-side\">FilterType :</td>\n            <td style=\"padding-top: 10px\"><input type=\"text\" id=\"filter-type\"> </td>\n        </tr>\n    </tbody></table>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n    // initialize AutoComplete component\n    var atcObj = new ej.dropdowns.AutoComplete({\n        // set the local data to dataSource property\n        dataSource: window.ddCountryData,\n        // map the appropriate columns to fields property\n        fields: { value: 'Name' },\n        // set the placeholder to AutoComplete input element\n        placeholder: 'e.g. Australia',\n        // enable the highlight property to highlight the matched character in suggestion list\n        highlight: true\n    });\n    atcObj.appendTo('#country');\n\n    // initialize DropDownList component\n    var ddlObj = new ej.dropdowns.DropDownList({\n        // set the array of string data to dataSource property\n        dataSource: ['Contains', 'StartsWith', 'EndsWith'],\n        // set the value to select an item at initial rendering.\n        text: 'Contains',\n        // set the placeholder to DropDownList input element\n        placeholder: 'Select a type',\n        // set width size of DropDownList element.\n        width: '150px',\n        // bind change event to modify the filter type of AutoComplete element.\n        change: function (e) {\n            atcObj.filterType = e.itemData.value;\n        }\n    });\n    ddlObj.appendTo('#filter-type');\n"}