element to hold the multiselect.\n */\n function _populateMarkup() {\n // Add a container for our markup\n _containerDom = document.createElement('div');\n _containerDom.className = BASE_CLASS;\n\n // Create all our markup but wait to manipulate the DOM just once\n _selectionsDom = create('ul', null, {\n className: 'm-tag-group',\n });\n\n _headerDom = create('header', _containerDom, {\n className: BASE_CLASS + '__header',\n });\n\n _searchDom = create('input', _headerDom, {\n className: BASE_CLASS + '__search ' + TEXT_INPUT_CLASS,\n type: 'text',\n placeholder: _placeholder || 'Select up to five',\n id: _dom.id,\n autocomplete: 'off',\n });\n\n _fieldsetDom = create('fieldset', _containerDom, {\n className: BASE_CLASS + '__fieldset u-invisible',\n 'aria-hidden': 'true',\n });\n\n let optionsClasses = BASE_CLASS + '__options';\n if (_model.isAtMaxSelections()) {\n optionsClasses += ' u-max-selections';\n }\n\n _optionsDom = create('ul', _fieldsetDom, {\n className: optionsClasses,\n });\n\n let option;\n let optionId;\n let isChecked;\n for (let i = 0, len = _options.length; i < len; i++) {\n option = _options[i];\n optionId = _getOptionId(option);\n isChecked = _model.getOption(i).checked;\n const optionsItemDom = create('li', _optionsDom, {\n 'data-option': option.value,\n 'data-cy': 'multiselect-option',\n class: 'm-form-field m-form-field--checkbox',\n });\n\n create('input', optionsItemDom, {\n id: optionId,\n // Type must come before value or IE fails\n type: 'checkbox',\n value: option.value,\n name: _name,\n class: CHECKBOX_INPUT_CLASS + ' ' + BASE_CLASS + '__checkbox',\n checked: isChecked,\n 'data-index': i,\n });\n\n create('label', optionsItemDom, {\n for: optionId,\n textContent: option.text,\n className: BASE_CLASS + '__label a-label',\n });\n\n _optionItemDoms.push(optionsItemDom);\n\n // Create
if enabled\n if (isChecked && _config?.renderTags) {\n _createSelectedItem(_selectionsDom, option);\n }\n }\n\n // Write our new markup to the DOM.\n _containerDom.insertBefore(_selectionsDom, _headerDom);\n _dom.parentNode.insertBefore(_containerDom, _dom);\n _containerDom.appendChild(_dom);\n\n return _containerDom;\n }\n\n /**\n * Set up and create the multiselect.\n * @param {object} multiselectConfig - Multiselect configuration options\n * @returns {Multiselect} An instance.\n */\n function init(multiselectConfig = DEFAULT_CONFIG) {\n if (!setInitFlag(_dom)) {\n return this;\n }\n\n if (isMobileUserAgent()) {\n return this;\n }\n\n _instance = this;\n _name = _dom.name || _dom.id;\n _placeholder = _dom.getAttribute('placeholder');\n _options = _dom.options || [];\n\n // Allow devs to pass the config settings they want and not worry about the rest\n _config = { ...DEFAULT_CONFIG, ...multiselectConfig };\n\n if (_options.length > 0) {\n // Store underlying model so we can expose it externally\n _model = new MultiselectModel(_options, _name, _config).init();\n const newDom = _populateMarkup();\n\n /* Removes