image in admin->catalog New or Edit Product section.<\/p>\n\n\n\n
![\"Select](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot-18.png\")
<\/figure>\n\n\n\nLet’s start step by step.
You must have installed your custom Module on which you are going to implement this.<\/p>\n\n\n\n
1.)<\/strong> Create a xml file which loads your Block and Phtml file.<\/p>\n\n\n\n For Example: Webkul\/Custom\/view\/frontend\/layout\/custom_test_index.xml<\/strong><\/p>\n\n\n\n Now,<\/strong> create a Controller file for this. 2.) <\/strong> Now Create the respective Block. In above Block file getCategoriesTree() Method loads the all Categories in array form. Its just 3.)<\/strong> Create the phtml template file. In above template file, we have instantiated ui-select.js component and its default values. For more default options of ui-select you can view this file: For Now let’s create the ui-select.html template which we have used in customCategory component.<?xml version="1.0"?>\n<!--\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_Custom\n * @author Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\n-->\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <update handle="customer_account"\/>\n <body>\n <referenceBlock name="page.main.title">\n <action method="setPageTitle">\n <argument translate="true" name="title" xsi:type="string">Ui Multi Select<\/argument>\n <\/action>\n <\/referenceBlock>\n <referenceContainer name="content">\n <block class="Webkul\\Custom\\Block\\Test" name="ui_multiselect" template="test.phtml" cacheable="false"\/>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
File:<\/strong> Webkul\/Custom\/Controller\/Test\/Index.php<\/strong><\/p>\n\n\n\n<?php\nnamespace Webkul\\Custom\\Controller\\Test;\n\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Framework\\View\\Result\\PageFactory;\nuse Magento\\Framework\\App\\RequestInterface;\nuse Magento\\Customer\\Model\\Url as CustomerUrl;\n\nclass Index extends \\Magento\\Customer\\Controller\\AbstractAccount\n{\n \/**\n * @var \\Magento\\Customer\\Model\\Session\n *\/\n protected $customerSession;\n\n \/**\n * @var PageFactory\n *\/\n protected $resultPageFactory;\n\n \/**\n * @var CustomerUrl\n *\/\n protected $customerUrl;\n\n \/**\n * Construct\n *\n * @param Context $context\n * @param PageFactory $resultPageFactory\n * @param \\Magento\\Customer\\Model\\Session $customerSession\n * @param CustomerUrl $customerUrl\n *\/\n public function __construct(\n Context $context,\n PageFactory $resultPageFactory,\n \\Magento\\Customer\\Model\\Session $customerSession,\n CustomerUrl $customerUrl\n ) {\n $this->customerSession = $customerSession;\n $this->resultPageFactory = $resultPageFactory;\n $this->customerUrl = $customerUrl;\n parent::__construct($context);\n }\n\n \/**\n * Check customer authentication.\n *\n * @param RequestInterface $request\n *\n * @return \\Magento\\Framework\\App\\ResponseInterface\n *\/\n public function dispatch(RequestInterface $request)\n {\n $loginUrl = $this->customerUrl->getLoginUrl();\n\n if (!$this->customerSession->authenticate($loginUrl)) {\n $this->_actionFlag->set('', self::FLAG_NO_DISPATCH, true);\n }\n\n return parent::dispatch($request);\n }\n\n \/**\n * Execute Action\n *\n * @return void\n *\/\n public function execute()\n {\n $resultPage = $this->resultPageFactory->create();\n $resultPage->getConfig()->getTitle()->set(__('Ui Multi Select'));\n\n return $resultPage;\n }\n}<\/pre>\n\n\n\n
Webkul\/Custom\/Block\/Test.php<\/strong><\/p>\n\n\n\n<?php\n\/**\n * Webkul Software.\n *\n * @category Webkul\n * @package Webkul_Custom\n * @author Webkul\n * @copyright Webkul Software Private Limited (https:\/\/webkul.com)\n * @license https:\/\/store.webkul.com\/license.html\n *\/\nnamespace Webkul\\Custom\\Block;\n\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Magento\\Framework\\App\\Filesystem\\DirectoryList;\n\nclass Test extends \\Magento\\Framework\\View\\Element\\Template\n{\n \/**\n * @var \\Magento\\Framework\\Data\\Form\\FormKey\n *\/\n protected $formKey;\n\n \/**\n * @var \\Magento\\Framework\\App\\Config\\ScopeConfigInterface\n *\/\n protected $_scopeConfig;\n\n \/**\n * @var \\Magento\\Framework\\UrlInterface\n *\/\n protected $_urlBuilder;\n\n \/**\n * @param \\Magento\\Backend\\Block\\Template\\Context $context\n * @param \\Magento\\Framework\\View\\Model\\PageLayout\\Config\\BuilderInterface $pageLayoutBuilder\n * @param \\Magento\\Framework\\ObjectManagerInterface $objectManager\n * @param array $data\n *\/\n public function __construct(\n \\Magento\\Backend\\Block\\Template\\Context $context,\n \\Magento\\Framework\\View\\Model\\PageLayout\\Config\\BuilderInterface $pageLayoutBuilder,\n \\Magento\\Framework\\ObjectManagerInterface $objectManager,\n array $data = []\n ) {\n $this->_objectManager = $objectManager;\n $this->formKey = $context->getFormKey();\n parent::__construct($context, $data);\n }\n\n \/**\n * Prepare layout\n *\n * @return this\n *\/\n public function _prepareLayout()\n {\n return parent::_prepareLayout();\n }\n \n public function getCategoriesTree()\n {\n $categories = $this->_objectManager->create(\n 'Magento\\Catalog\\Ui\\Component\\Product\\Form\\Categories\\Options'\n )->toOptionArray();\n return json_encode($categories);\n }\n}<\/pre>\n\n\n\n
an example, you can pass your custom array to display in the field.<\/p>\n\n\n\n
Webkul\/Custom\/view\/frontend\/templates\/test.phtml<\/strong><\/p>\n\n\n\n<form action="<?php echo $block->getUrl('custom\/manage\/save', ['_secure' => $this->getRequest()->isSecure()]) ?>" enctype="multipart\/form-data" method="post" data-mage-init='{"validation":{}}'>\n <fieldset class="fieldset">\n <div class="field required">\n <label class="label"><?php echo __('Select Category') ?>:<\/label>\n <div data-bind="scope: 'customCategory'">\n <!-- ko template: getTemplate() --><!-- \/ko -->\n <\/div>\n <script type="text\/x-magento-init">\n {\n "*": {\n "Magento_Ui\/js\/core\/app": {\n "components": {\n "customCategory": {\n "component": "Magento_Ui\/js\/form\/element\/ui-select",\n "template" : "Webkul_Custom\/ui-select",\n "filterOptions": true,\n "levelsVisibility": "1",\n "multiple": true,\n "showCheckbox": true,\n "options": <?php echo $block->getCategoriesTree()?>\n }\n }\n }\n }\n }\n <\/script>\n <\/div>\n <\/fieldset>\n<\/form><\/pre>\n\n\n\nHow to Create Multi Select UI Field on Frontend as Admin<\/h3>\n\n\n\n
You can customize this ui-select fields according to your choice. Like you can disable multiple, showCheckbox etc.<\/p>\n\n\n\n
Magento_Ui\/js\/form\/element\/ui-select.js<\/p>\n\n\n\n
Webkul\/Custom<\/strong>\/view\/frontend\/web\/template\/ui-select.html<\/strong><\/p>\n\n\n\n<!-- ko ifnot: disableLabel -->\n<label class="admin__form-field-label" data-bind="attr: {for: uid}\n">\n <span translate="label"><\/span>\n<\/label>\n<!-- \/ko -->\n<div class="admin__action-multiselect-wrap action-select-wrap" tabindex="0" data-bind="\nattr: {\n id: uid\n},\ncss: {\n _active: listVisible,\n 'admin__action-multiselect-tree': isTree()\n},\nevent: {\n focusin: onFocusIn,\n focusout: onFocusOut,\n keydown: keydownSwitcher\n},\nouterClick: outerClick.bind($data)\n">\n <!-- ko ifnot: chipsEnabled -->\n <div class="action-select admin__action-multiselect" data-role="advanced-select" data-bind="\n css: {_active: multiselectFocus},\n click: function(data, event) {\n toggleListVisible(data, event)\n }\n">\n <div class="admin__action-multiselect-text" data-role="selected-option" data-bind="text: setCaption()">\n <\/div>\n <!-- ko foreach: { data: getSelected(), as: 'option'} -->\n <input type="hidden" name="category_id" data-bind="\n attr: {\n id: 'wk-cat-hide'+value,\n value: value\n }\n ">\n <!-- \/ko -->\n <\/div>\n <!-- \/ko -->\n <!-- ko if: chipsEnabled -->\n <div class="action-select admin__action-multiselect" data-role="advanced-select" data-bind="\n css: {_active: multiselectFocus},\n click: function(data, event) {\n toggleListVisible(data, event)\n }\n">\n <div class="admin__action-multiselect-text" data-bind="\n visible: !hasData(),\n i18n: selectedPlaceholders.defaultPlaceholder\n">\n <\/div>\n <!-- ko foreach: { data: getSelected(), as: 'option'} -->\n <span class="admin__action-multiselect-crumb">\n <span data-bind="text: label">\n <\/span>\n <button class="action-close" type="button" data-action="remove-selected-item" tabindex="-1" data-bind="click: $parent.removeSelected.bind($parent, value)\n ">\n <span class="action-close-text" translate="'Close'"><\/span>\n <\/button>\n <\/span>\n <!-- \/ko -->\n <\/div>\n <!-- \/ko -->\n <div class="action-menu" data-bind="css: { _active: listVisible }\n">\n <!-- ko if: filterOptions -->\n <div class="admin__action-multiselect-search-wrap">\n <input class="admin__control-text admin__action-multiselect-search" data-role="advanced-select-text" type="text" data-bind="\n event: {\n keydown: filterOptionsKeydown\n },\n attr: {id: uid+2},\n valueUpdate: 'afterkeydown',\n value: filterInputValue,\n hasFocus: filterOptionsFocus\n ">\n <label class="admin__action-multiselect-search-label" data-action="advanced-select-search" data-bind="attr: {for: uid+2}\n ">\n <\/label>\n <div if="itemsQuantity" data-bind="text: itemsQuantity" class="admin__action-multiselect-search-count">\n <\/div>\n <\/div>\n <!-- \/ko -->\n <ul class="admin__action-multiselect-menu-inner _root" data-bind="\n event: {\n mousemove: function(data, event){onMousemove($data, event)}\n }\n ">\n <!-- ko foreach: { data: options, as: 'option'} -->\n <li class="admin__action-multiselect-menu-inner-item _root" data-bind="css: { _parent: $data.optgroup }" data-role="option-group">\n <div class="action-menu-item" data-bind="\n css: {\n _selected: $parent.isSelected(option.value),\n _hover: $parent.isHovered(option, $element),\n _expended: $parent.getLevelVisibility($data),\n _unclickable: $parent.isLabelDecoration($data),\n _last: $parent.addLastElement($data),\n '_with-checkbox': $parent.showCheckbox\n },\n click: function(data, event){\n $parent.toggleOptionSelected($data, event);\n },\n clickBubble: false\n ">\n <!-- ko if: $data.optgroup && $parent.showOpenLevelsActionIcon-->\n <div class="admin__action-multiselect-dropdown" data-bind="\n click: function(event){\n $parent.openChildLevel($data, $element, event);\n },\n clickBubble: false\n ">\n <\/div>\n <!-- \/ko-->\n <!--ko if: $parent.showCheckbox-->\n <input class="admin__control-checkbox" type="checkbox" tabindex="-1" data-bind="attr: { 'checked': $parent.isSelected(option.value) }">\n <!-- \/ko-->\n <label class="admin__action-multiselect-label">\n <span data-bind="text: option.label"><\/span>\n <span if="$parent.getPath(option)" class="admin__action-multiselect-item-path" data-bind="text: $parent.getPath(option)"><\/span>\n <\/label>\n <\/div>\n <!-- ko if: $data.optgroup -->\n <!-- ko template: {name: $parent.optgroupTmpl, data: {root: $parent, current: $data}} -->\n <!-- \/ko -->\n <!-- \/ko-->\n <\/li>\n <!-- \/ko -->\n <\/ul>\n <!-- ko if: $data.closeBtn -->\n <div class="admin__action-multiselect-actions-wrap">\n <button class="action-default" data-action="close-advanced-select" type="button" data-bind="click: outerClick">\n <span translate="closeBtnLabel"><\/span>\n <\/button>\n <\/div>\n <!-- \/ko -->\n <\/div>\n<\/di\n\n<strong>Also,<\/strong> you can use your own ui-select.js in component as: <strong>Webkul_Custom\/js\/form\/element\/ui-select.js<\/strong><\/pre>\n\n\n\ndefine([\n 'underscore',\n 'Magento_Ui\/js\/form\/element\/abstract',\n 'Magento_Ui\/js\/lib\/key-codes',\n 'mage\/translate',\n 'ko',\n 'jquery',\n 'Magento_Ui\/js\/lib\/view\/utils\/async'\n], function (_, Abstract, keyCodes, $t, ko, $) {\n 'use strict';\n\n var isTouchDevice = typeof document.ontouchstart !== 'undefined';\n\n \/**\n * Processing options list\n *\n * @param {Array} array - Property array\n * @param {String} separator - Level separator\n * @param {Array} created - list to add new options\n *\n * @return {Array} Plain options list\n *\/\n function flattenCollection(array, separator, created)\n {\n var i = 0,\n length,\n childCollection;\n\n array = _.compact(array);\n length = array.length;\n created = created || [];\n\n for (i; i < length; i++) {\n created.push(array[i]);\n\n if (array[i].hasOwnProperty(separator)) {\n childCollection = array[i][separator];\n delete array[i][separator];\n flattenCollection.call(this, childCollection, separator, created);\n }\n }\n\n return created;\n }\n\n \/**\n * Set levels to options list\n *\n * @param {Array} array - Property array\n * @param {String} separator - Level separator\n * @param {Number} level - Starting level\n * @param {String} path - path to root\n *\n * @returns {Array} Array with levels\n *\/\n function setProperty(array, separator, level, path)\n {\n var i = 0,\n length,\n nextLevel,\n nextPath;\n\n array = _.compact(array);\n length = array.length;\n level = level || 0;\n path = path || '';\n\n for (i; i < length; i++) {\n if (array[i]) {\n _.extend(array[i], {\n level: level,\n path: path\n });\n }\n\n if (array[i].hasOwnProperty(separator)) {\n nextLevel = level + 1;\n nextPath = path ? path + '.' + array[i].label : array[i].label;\n setProperty.call(this, array[i][separator], separator, nextLevel, nextPath);\n }\n }\n\n return array;\n }\n\n \/**\n * Preprocessing options list\n *\n * @param {Array} nodes - Options list\n *\n * @return {Object} Object with property - options(options list)\n * and cache options with plain and tree list\n *\/\n function parseOptions(nodes)\n {\n var caption,\n value,\n cacheNodes,\n copyNodes;\n\n nodes = setProperty(nodes, 'optgroup');\n copyNodes = JSON.parse(JSON.stringify(nodes));\n cacheNodes = flattenCollection(copyNodes, 'optgroup');\n\n nodes = _.map(nodes, function (node) {\n value = node.value;\n\n if (value == null || value === '') {\n if (_.isUndefined(caption)) {\n caption = node.label;\n }\n } else {\n return node;\n }\n });\n\n return {\n options: _.compact(nodes),\n cacheOptions: {\n plain: _.compact(cacheNodes),\n tree: _.compact(nodes)\n }\n };\n }\n\n return Abstract.extend({\n defaults: {\n options: [],\n listVisible: false,\n value: [],\n filterOptions: false,\n chipsEnabled: true,\n itemsQuantity: '',\n filterInputValue: '',\n filterOptionsFocus: false,\n multiselectFocus: false,\n multiple: true,\n selectType: 'tree',\n lastSelectable: false,\n showFilteredQuantity: true,\n showCheckbox: true,\n levelsVisibility: true,\n openLevelsAction: true,\n showOpenLevelsActionIcon: true,\n optgroupLabels: false,\n closeBtn: true,\n showPath: true,\n labelsDecoration: false,\n disableLabel: false,\n filterRateLimit: 500,\n closeBtnLabel: $t('Done'),\n optgroupTmpl: 'ui\/grid\/filters\/elements\/ui-select-optgroup',\n quantityPlaceholder: $t('options'),\n hoverClass: '_hover',\n rootListSelector: 'ul.admin__action-multiselect-menu-inner._root',\n visibleOptionSelector: 'li.admin__action-multiselect-menu-inner-item:visible',\n actionTargetSelector: '.action-menu-item',\n selectedPlaceholders: {\n defaultPlaceholder: $t('Select...'),\n lotPlaceholders: $t('Selected')\n },\n separator: 'optgroup',\n listens: {\n listVisible: 'cleanHoveredElement',\n filterInputValue: 'filterOptionsList',\n options: 'checkOptionsList'\n },\n presets: {\n single: {\n showCheckbox: false,\n chipsEnabled: false,\n closeBtn: false\n },\n optgroup: {\n showCheckbox: false,\n lastSelectable: true,\n optgroupLabels: true,\n openLevelsAction: false,\n labelsDecoration: true,\n showOpenLevelsActionIcon: false\n }\n }\n },\n\n \/**\n * Initializes UISelect component.\n *\n * @returns {UISelect} Chainable.\n *\/\n initialize: function () {\n this._super();\n\n $.async(\n this.rootListSelector,\n this,\n this.onRootListRender.bind(this)\n );\n\n return this;\n },\n\n \/**\n * Parses options and merges the result with instance\n * Set defaults according to mode and levels configuration\n *\n * @param {Object} config\n * @returns {Object} Chainable.\n *\/\n initConfig: function (config) {\n var result = parseOptions(config.options),\n defaults = this.constructor.defaults,\n multiple = _.isBoolean(config.multiple) ? config.multiple : defaults.multiple,\n type = config.selectType || defaults.selectType,\n showOpenLevelsActionIcon = _.isBoolean(config.showOpenLevelsActionIcon) ?\n config.showOpenLevelsActionIcon :\n defaults.showOpenLevelsActionIcon,\n openLevelsAction = _.isBoolean(config.openLevelsAction) ?\n config.openLevelsAction :\n defaults.openLevelsAction;\n\n multiple = !multiple ? 'single' : false;\n config.showOpenLevelsActionIcon = showOpenLevelsActionIcon && openLevelsAction;\n _.extend(config, result, defaults.presets[multiple], defaults.presets[type]);\n this._super();\n\n return this;\n },\n\n \/**\n * Check child optgroup\n *\/\n hasChildList: function () {\n return _.find(this.options(), function (option) {\n return !!option[this.separator];\n }, this);\n },\n\n \/**\n * Check tree mode\n *\/\n isTree: function () {\n return this.hasChildList() && this.selectType !== 'optgroup';\n },\n\n \/**\n * Add option to lastOptions array\n *\n * @param {Object} data\n * @returns {Boolean}\n *\/\n addLastElement: function (data) {\n if (!data.hasOwnProperty(this.separator)) {\n !this.cacheOptions.lastOptions ? this.cacheOptions.lastOptions = [] : false;\n\n if (!_.findWhere(this.cacheOptions.lastOptions, { value: data.value })) {\n this.cacheOptions.lastOptions.push(data);\n }\n\n return true;\n }\n\n return false;\n },\n\n \/**\n * Check options length and set to cache\n * if some options is added\n *\n * @param {Array} options - ui select options\n *\/\n checkOptionsList: function (options) {\n if (options.length > this.cacheOptions.plain.length) {\n this.cacheOptions.plain = options;\n this.setCaption();\n }\n },\n\n \/**\n * Check label decoration\n *\/\n isLabelDecoration: function (data) {\n return data.hasOwnProperty(this.separator) && this.labelsDecoration;\n },\n\n \/**\n * Calls 'initObservable' of parent, initializes 'options' and 'initialOptions'\n * properties, calls 'setOptions' passing options to it\n *\n * @returns {Object} Chainable.\n *\/\n initObservable: function () {\n this._super();\n this.observe([\n 'listVisible',\n 'placeholder',\n 'multiselectFocus',\n 'options',\n 'itemsQuantity',\n 'filterInputValue',\n 'filterOptionsFocus'\n ]);\n\n this.filterInputValue.extend({\n rateLimit: this.filterRateLimit\n });\n\n return this;\n },\n\n \/**\n * object with key - keyname and value - handler function for this key\n *\n * @returns {Object} Object with handlers function name.\n *\/\n keyDownHandlers: function () {\n return {\n enterKey: this.enterKeyHandler,\n escapeKey: this.escapeKeyHandler,\n spaceKey: this.enterKeyHandler,\n pageUpKey: this.pageUpKeyHandler,\n pageDownKey: this.pageDownKeyHandler\n };\n },\n\n \/**\n * Processing level visibility for levels\n *\n * @param {Object} data - element data\n *\n * @returns {Boolean} level visibility.\n *\/\n showLevels: function (data) {\n var curLevel = ++data.level,\n isVisible;\n\n if (data.visible) {\n isVisible = data.visible();\n } else {\n isVisible = !!data.hasOwnProperty(this.separator) &&\n _.isBoolean(this.levelsVisibility) &&\n this.levelsVisibility ||\n data.hasOwnProperty(this.separator) && parseInt(this.levelsVisibility, 10) >= curLevel;\n\n data.visible = ko.observable(isVisible);\n data.isVisited = isVisible;\n }\n\n return isVisible;\n },\n\n \/**\n * Processing level visibility for levels\n *\n * @param {Object} data - element data\n *\n * @returns {Boolean} level visibility.\n *\/\n getLevelVisibility: function (data) {\n if (data.visible) {\n return data.visible();\n }\n\n return this.showLevels(data);\n },\n\n \/**\n * Set option to options array.\n *\n * @param {Object} option\n * @param {Array} options\n *\/\n setOption: function (option, options) {\n var copyOptionsTree;\n\n options = options || this.cacheOptions.tree;\n\n _.each(options, function (opt) {\n if (opt.value == option.parent) { \/\/eslint-disable-line eqeqeq\n delete option.parent;\n opt[this.separator] ? opt[this.separator].push(option) : opt[this.separator] = [option];\n copyOptionsTree = JSON.parse(JSON.stringify(this.cacheOptions.tree));\n this.cacheOptions.plain = flattenCollection(copyOptionsTree, this.separator);\n this.options(this.cacheOptions.tree);\n } else if (opt[this.separator]) {\n this.setOption(option, opt[this.separator]);\n }\n }, this);\n },\n\n \/**\n * Handler outerClick event. Closed options list\n *\/\n outerClick: function () {\n this.listVisible() ? this.listVisible(false) : false;\n\n if (isTouchDevice) {\n this.multiselectFocus(false);\n }\n },\n\n \/**\n * Handler keydown event to filter options input\n *\n * @returns {Boolean} Returned true for emersion events\n *\/\n filterOptionsKeydown: function (data, event) {\n var key = keyCodes[event.keyCode];\n\n !this.isTabKey(event) ? event.stopPropagation() : false;\n\n if (key === 'pageDownKey' || key === 'pageUpKey') {\n event.preventDefault();\n this.filterOptionsFocus(false);\n this.cacheUiSelect.focus();\n }\n\n this.keydownSwitcher(data, event);\n\n return true;\n },\n\n \/**\n * Filtered options list by value from filter options list\n *\/\n filterOptionsList: function () {\n var value = this.filterInputValue().trim().toLowerCase(),\n array = [];\n\n if (value && value.length < 2) {\n return false;\n }\n\n this.cleanHoveredElement();\n\n if (!value) {\n this.renderPath = false;\n this.options(this.cacheOptions.tree);\n this._setItemsQuantity(false);\n\n return false;\n }\n\n this.showPath ? this.renderPath = true : false;\n\n if (this.filterInputValue()) {\n array = this.selectType === 'optgroup' ?\n this._getFilteredArray(this.cacheOptions.lastOptions, value) :\n this._getFilteredArray(this.cacheOptions.plain, value);\n\n if (!value.length) {\n this.options(this.cacheOptions.plain);\n this._setItemsQuantity(this.cacheOptions.plain.length);\n } else {\n this.options(array);\n this._setItemsQuantity(array.length);\n }\n\n return false;\n }\n\n this.options(this.cacheOptions.plain);\n },\n\n \/**\n * Filtered options list by value from filter options list\n *\n * @param {Array} list - option list\n * @param {String} value\n *\n * @returns {Array} filters result\n *\/\n _getFilteredArray: function (list, value) {\n var i = 0,\n array = [],\n curOption;\n\n for (i; i < list.length; i++) {\n curOption = list[i].label.toLowerCase();\n\n if (curOption.indexOf(value) > -1) {\n array.push(list[i]); \/*eslint max-depth: [2, 4]*\/\n }\n }\n\n return array;\n },\n\n \/**\n * Get path to current option\n *\n * @param {Object} data - option data\n * @returns {String} path\n *\/\n getPath: function (data) {\n var pathParts,\n createdPath = '';\n\n if (this.renderPath) {\n pathParts = data.path.split('.');\n _.each(pathParts, function (curData) {\n createdPath = createdPath ? createdPath + ' \/ ' + curData : curData;\n });\n\n return createdPath;\n }\n },\n\n \/**\n * Set filtered items quantity\n *\n * @param {Object} data - option data\n *\/\n _setItemsQuantity: function (data) {\n if (this.showFilteredQuantity) {\n data || parseInt(data, 10) === 0 ?\n this.itemsQuantity(data + ' ' + this.quantityPlaceholder) :\n this.itemsQuantity('');\n }\n },\n\n \/**\n * Remove element from selected array\n *\/\n removeSelected: function (value, data, event) {\n event ? event.stopPropagation() : false;\n this.value.remove(value);\n },\n\n \/**\n * Checked key name\n *\n * @returns {Boolean}\n *\/\n isTabKey: function (event) {\n return keyCodes[event.keyCode] === 'tabKey';\n },\n\n \/**\n * Clean hoveredElement variable\n *\n * @returns {Object} Chainable\n *\/\n cleanHoveredElement: function () {\n if (this.hoveredElement) {\n $(this.hoveredElement)\n .children(this.actionTargetSelector)\n .removeClass(this.hoverClass);\n\n this.hoveredElement = null;\n }\n\n return this;\n },\n\n \/**\n * Check selected option\n *\n * @param {String} value - option value\n * @return {Boolean}\n *\/\n isSelected: function (value) {\n return this.multiple ? _.contains(this.value(), value) : this.value() === value;\n },\n\n \/**\n * Check optgroup label\n *\n * @param {Object} data - element data\n * @return {Boolean}\n *\/\n isOptgroupLabels: function (data) {\n return data.hasOwnProperty(this.separator) && this.optgroupLabels;\n },\n\n \/**\n * Check hovered option\n *\n * @param {Object} data - element data\n * @return {Boolean}\n *\/\n isHovered: function (data) {\n var element = this.hoveredElement,\n elementData;\n\n if (!element) {\n return false;\n }\n\n elementData = ko.dataFor(this.hoveredElement);\n\n return data.value === elementData.value;\n },\n\n \/**\n * Toggle list visibility\n *\n * @returns {Object} Chainable\n *\/\n toggleListVisible: function () {\n this.listVisible(!this.listVisible());\n\n return this;\n },\n\n \/**\n * Get selected element labels\n *\n * @returns {Array} array labels\n *\/\n getSelected: function () {\n var selected = this.value();\n\n return this.cacheOptions.plain.filter(function (opt) {\n return _.isArray(selected) ?\n _.contains(selected, opt.value) :\n selected == opt.value;\/\/eslint-disable-line eqeqeq\n });\n },\n\n \/**\n * Toggle activity list element\n *\n * @param {Object} data - selected option data\n * @returns {Object} Chainable\n *\/\n toggleOptionSelected: function (data) {\n var isSelected = this.isSelected(data.value);\n\n if (this.lastSelectable && data.hasOwnProperty(this.separator)) {\n return this;\n }\n\n if (!this.multiple) {\n if (!isSelected) {\n this.value(data.value);\n }\n this.listVisible(false);\n } else {\n if (!isSelected) { \/*eslint no-lonely-if: 0*\/\n this.value.push(data.value);\n } else {\n this.value(_.without(this.value(), data.value));\n }\n }\n\n return this;\n },\n\n \/**\n * Change visibility to child level\n *\n * @param {Object} data - element data\n *\/\n openChildLevel: function (data) {\n var contextElement = data,\n isVisible;\n\n if (this.openLevelsAction && data.hasOwnProperty(this.separator) && _.isBoolean(this.levelsVisibility) || this.openLevelsAction && data.hasOwnProperty(this.separator) && parseInt(this.levelsVisibility, 10) <= data.level) {\n isVisible = !contextElement.visible();\n\n if (isVisible && !contextElement.isVisited) {\n contextElement.isVisited = true;\n }\n\n contextElement.visible(isVisible);\n }\n },\n\n \/**\n * Check selected elements\n *\n * @returns {Boolean}\n *\/\n hasData: function () {\n if (!this.value()) {\n this.value([]);\n }\n\n return this.value() ? !!this.value().length : false;\n },\n\n \/**\n * @deprecated\n *\/\n onMousemove: function () {},\n\n \/**\n * Handles hover on list items.\n *\n * @param {Object} event - mousemove event\n *\/\n onDelegatedMouseMouve: function (event) {\n var target = $(event.currentTarget).closest(this.visibleOptionSelector)[0];\n\n if (this.isCursorPositionChange(event) || this.hoveredElement === target) {\n return;\n }\n\n this._hoverTo(target);\n this.setCursorPosition(event);\n },\n\n \/**\n * Get option index\n *\n * @param {Object} data - object with data about this element\n *\n * @returns {Number}\n *\/\n getOptionIndex: function (data) {\n var index;\n\n _.each(this.cacheOptions.plain, function (opt, id) {\n if (data.value === opt.value) {\n index = id;\n }\n });\n\n return index;\n },\n\n \/**\n * Set X and Y cursor position\n *\n * @param {Object} event - mousemove event\n *\/\n setCursorPosition: function (event) {\n this.cursorPosition = {\n x: event.pageX,\n y: event.pageY\n };\n },\n\n \/**\n * Check previous and current cursor position\n *\n * @param {Object} event - mousemove event\n * @returns {Boolean}\n *\/\n isCursorPositionChange: function (event) {\n return this.cursorPosition &&\n this.cursorPosition.x === event.pageX &&\n this.cursorPosition.y === event.pageY;\n },\n\n \/**\n * Set true to observable variable multiselectFocus\n * @param {Object} ctx\n * @param {Object} event - focus event\n *\/\n onFocusIn: function (ctx, event) {\n !this.cacheUiSelect ? this.cacheUiSelect = event.target : false;\n this.multiselectFocus(true);\n },\n\n \/**\n * Set false to observable variable multiselectFocus\n * and close list\n *\/\n onFocusOut: function () {\n this.multiselectFocus(false);\n },\n\n \/**\n * Handler enter key, if select list is closed - open select,\n * if select list is open toggle selected current option\n *\/\n enterKeyHandler: function () {\n\n if (this.filterOptionsFocus()) {\n return false;\n }\n\n if (this.listVisible()) {\n if (this.hoveredElement) {\n this.toggleOptionSelected(ko.dataFor(this.hoveredElement));\n }\n } else {\n this.setListVisible(true);\n }\n },\n\n \/**\n * Handler escape key, if select list is open - closes it,\n *\/\n escapeKeyHandler: function () {\n this.listVisible() ? this.setListVisible(false) : false;\n },\n\n \/**\n * Handler pageDown key, selected next option in list, if current option is last\n * selected first option in list\n *\/\n pageDownKeyHandler: function () {\n this._setHoverToElement(1);\n },\n\n \/**\n * Get jQuery element by option data\n *\n * @param {Object} data - option data\n *\n * @returns {Object} jQuery element\n *\/\n _getElemByData: function (data) {\n var i = 0,\n list = $(this.cacheUiSelect).find('li'),\n length = this.options().length,\n result;\n\n for (i; i < length; i++) {\n if (this.options()[i].value === data.value) {\n result = $(list[i]);\n }\n }\n\n return result;\n },\n\n \/**\n * Set hover to visible element\n *\n * @param {Number} direction - iterator\n *\/\n _setHoverToElement: function (direction) {\n var element;\n\n if (direction === 1) {\n element = this._getNextElement();\n } else if (direction === -1) {\n element = this._getPreviousElement();\n }\n\n if (element) {\n this._hoverTo(element);\n this._scrollTo(element);\n }\n },\n\n \/**\n * Find current hovered element\n * and change scroll position\n *\n * @param {Number} element - element index\n *\/\n _scrollTo: function (element) {\n var curEl = $(element).children(this.actionTargetSelector),\n wrapper = $(this.rootList),\n curElPos = {},\n wrapperPos = {};\n\n curElPos.start = curEl.offset().top;\n curElPos.end = curElPos.start + curEl.outerHeight();\n\n wrapperPos.start = wrapper.offset().top;\n wrapperPos.end = wrapperPos.start + wrapper.height();\n\n if (curElPos.start < wrapperPos.start) {\n wrapper.scrollTop(wrapper.scrollTop() - (wrapperPos.start - curElPos.start));\n } else if (curElPos.end > wrapperPos.end) {\n wrapper.scrollTop(wrapper.scrollTop() + curElPos.end - wrapperPos.end);\n }\n },\n\n \/**\n * Handler pageUp key, selected previous option in list, if current option is first -\n * selected last option in list\n *\/\n pageUpKeyHandler: function () {\n this._setHoverToElement(-1);\n },\n\n \/**\n * Switcher to parse keydown event and delegate event to needful method\n *\n * @param {Object} data - element data\n * @param {Object} event - keydown event\n * @returns {Boolean} if handler for this event doesn't found return true\n *\/\n keydownSwitcher: function (data, event) {\n var keyName = keyCodes[event.keyCode];\n\n if (this.isTabKey(event)) {\n if (!this.filterOptionsFocus() && this.listVisible() && this.filterOptions) {\n this.cacheUiSelect.blur();\n this.filterOptionsFocus(true);\n this.cleanHoveredElement();\n\n return false;\n }\n this.listVisible(false);\n\n return true;\n }\n\n if (this.keyDownHandlers().hasOwnProperty(keyName)) {\n this.keyDownHandlers()[keyName].apply(this, arguments);\n } else {\n return true;\n }\n },\n\n \/**\n * Set caption\n *\/\n setCaption: function () {\n var length;\n\n if (!_.isArray(this.value()) && this.value()) {\n length = 1;\n } else if (this.value()) {\n length = this.value().length;\n } else {\n this.value([]);\n length = 0;\n }\n\n if (length > 1) {\n this.placeholder(length + ' ' + this.selectedPlaceholders.lotPlaceholders);\n } else if (length && this.getSelected().length) {\n this.placeholder(this.getSelected()[0].label);\n } else {\n this.placeholder(this.selectedPlaceholders.defaultPlaceholder);\n }\n\n return this.placeholder();\n },\n\n \/**\n * Set list status, open or close\n *\n * @param {Boolean} value - variable for set list visible status\n *\/\n setListVisible: function (value) {\n this.listVisible(value);\n },\n\n \/**\n * Processes preview for option by it's value, and sets the result\n * to 'preview' observable\n *\n * @returns {String}\n *\/\n getPreview: function () {\n var selected = this.getSelected();\n\n return selected.map(function (option) {\n return option.label;\n }).join(', ');\n },\n\n \/**\n * Defines previous option element to\n * the one that is currently hovered.\n *\n * @returns {Element}\n *\/\n _getPreviousElement: function () {\n var currentElement = this.hoveredElement,\n lastElement = this._getLastIn(this.rootList),\n previousElement;\n\n if (!currentElement) {\n return lastElement;\n }\n\n previousElement = $(currentElement).prev()[0];\n\n return this._getLastIn(previousElement) ||\n previousElement ||\n this._getFirstParentOf(currentElement) ||\n lastElement;\n },\n\n \/**\n * Defines next option element to\n * the one that is currently hovered.\n *\n * @returns {Element}\n *\/\n _getNextElement: function () {\n var currentElement = this.hoveredElement,\n firstElement = this._getFirstIn(this.rootList);\n\n if (!currentElement) {\n return firstElement;\n }\n\n return this._getFirstIn(currentElement) ||\n $(currentElement).next()[0] ||\n this._getParentsOf(currentElement).next()[0] ||\n firstElement;\n },\n\n \/**\n * Returns first option element in provided scope.\n *\n * @param {Element} scope\n * @returns {Element}\n *\/\n _getFirstIn: function (scope) {\n return $(scope).find(this.visibleOptionSelector)[0];\n },\n\n \/**\n * Returns last descendant option element in provided scope.\n *\n * @param {Element} scope\n * @returns {Element}\n *\/\n _getLastIn: function (scope) {\n return $(scope).find(this.visibleOptionSelector).last()[0];\n },\n\n \/**\n * Returns a collection of parent option elements.\n *\n * @param {Element} scope\n * @returns {jQueryCollection}\n *\/\n _getParentsOf: function (scope) {\n return $(scope).parents(this.visibleOptionSelector);\n },\n\n \/**\n * Returns first parent option element.\n *\n * @param {Element} scope\n * @returns {Element}\n *\/\n _getFirstParentOf: function (scope) {\n return this._getParentsOf(scope)[0];\n },\n\n \/**\n * Sets hover class to provided option element.\n *\n * @param {Element} element\n *\/\n _hoverTo: function (element) {\n if (this.hoveredElement) {\n $(this.hoveredElement)\n .children(this.actionTargetSelector)\n .removeClass(this.hoverClass);\n }\n\n $(element)\n .children(this.actionTargetSelector)\n .addClass(this.hoverClass);\n\n this.hoveredElement = element;\n },\n\n \/**\n * Callback which fires when root list element is rendered.\n *\n * @param {Element} element\n *\/\n onRootListRender: function (element) {\n var targetSelector = 'li > ' + this.actionTargetSelector;\n\n this.rootList = element;\n\n $(this.rootList).on(\n 'mousemove',\n targetSelector,\n this.onDelegatedMouseMouve.bind(this)\n );\n }\n });\n});<\/pre>\n\n\n\n
Now, Flush the Cache, and see the result like below image.<\/p>\n\n\n\n
![\"Select](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2017\/12\/Screenshot-1-1.png\")
<\/figure>\n\n\n\n