custom-value-stack.json

{"index.html":"<html><head><script src=\"//npmci.syncfusion.com/production/demos/combo-box/custom-value/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=\"control-section\">\n    <div class=\"control-wrapper\">\n        <div style=\"padding-top:75px;\">\n            <input type=\"text\" tabindex=\"1\" id=\"country\">\n        </div>\n    </div>\n</div>\n\n\n\n\n\n","index.js":"{{ripple}}\n\n    // initialize ComboBox component\n    var comboBoxObj = new ej.dropdowns.ComboBox({\n        // set the local data to dataSource property\n        dataSource: window.ddCountryData,\n        // map the appropriate columns to fields property\n        fields: { text: 'Name', value: 'Code' },\n        // set the placeholder to ComboBox input element\n        placeholder: 'Select a country',\n        // set the height of the popup element\n        popupHeight: '300px',\n        // set true for enable the filtering support\n        allowFiltering: true,\n        // bind the filtering event\n        filtering: function (e) {\n            var query = new ej.data.Query();\n            // frame the query based on search string with filter type.\n            query = (e.text !== '') ? query.where('Name', 'startswith', e.text, true) : query;\n            // pass the filter data source, filter query to updateData method.\n            e.updateData(window.ddCountryData, query);\n            if (document.getElementById('nodata')) {\n                // bind click event to button element\n                document.getElementById('btn').onclick = function () {\n                    // get the typed characters\n                    var customValue = document.getElementById('country').value;\n                    // make new object based on typed characters\n                    var newItem = { 'Name': customValue, 'Code': customValue };\n                    // new object added to data source.\n                    comboBoxObj.dataSource.push(newItem);\n                    // close the popup element.\n                    comboBoxObj.hidePopup();\n                    // pass new object to addItem method.\n                    comboBoxObj.addItem(newItem);\n                    // select the newly added item.\n                    comboBoxObj.value = customValue;\n                };\n            }\n        },\n        // set the template content when the typed character(s) is not present in the list\n        noRecordsTemplate: '<div><div id=\"nodata\"> No matched item, do you want to add it as new item in list?</div><button id=\"btn\" class=\"e-control e-btn\">Add New Item</button></div>',\n    });\n    comboBoxObj.appendTo('#country');\n\n"}