@internetstiftelsen/styleguide 4.0.12-beta.0.5 → 4.0.13

package/dist/components.js

@@ -72,4 +72,6 @@ require('./assets/js/utmGenerator');
 
 require('./assets/js/textToggle');
 
-require('./assets/js/iconToggle');
+require('./assets/js/iconToggle');
+
+require('./molecules/multi-select/multi-select');

package/dist/molecules/multi-select/multi-select.js

@@ -1,140 +1,269 @@
 'use strict';
 
-/* eslint-disable */
-var className = 'm-multi-select';
-var multiSelectElements = document.querySelectorAll('.js-' + className);
-var namespace = void 0;
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-if (multiSelectElements) {
-	namespace = getComputedStyle(multiSelectElements[0], ':before').content.replace(/["']/g, '');
-}
-
-var currentFocus = -1; // Tracks the currently focused item in the suggestions
-
-// Highlight the active (focused) suggestion
-function setActive(items) {
-	if (!items.length) return false;
-	removeActive(items);
-	if (currentFocus >= items.length) currentFocus = 0;
-	if (currentFocus < 0) currentFocus = items.length - 1;
-	items[currentFocus].classList.add('autocomplete-active');
-
-	return items;
-}
-
-// Remove highlighting from all suggestions
-function removeActive(items) {
-	for (var i = 0; i < items.length; i += 1) {
-		items[i].classList.remove('autocomplete-active');
+var _className = require('../../assets/js/className');
+
+var _className2 = _interopRequireDefault(_className);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+var MultiSelect = function () {
+	function MultiSelect(el) {
+		var _this = this;
+
+		_classCallCheck(this, MultiSelect);
+
+		this.onInput = function () {
+			var value = _this.input.value;
+
+			// Clear suggestions if less than 2 characters are typed
+
+			if (value.length < 2) {
+				_this.clearSuggestions();
+
+				return;
+			}
+
+			var suggestions = _this.filterData(value);
+
+			_this.populateSuggestions(suggestions);
+			_this.resetFocus();
+		};
+
+		this.onKeyDown = function (e) {
+			if (e.keyCode === 40) {
+				_this.highlight('down');
+			} else if (e.keyCode === 38) {
+				_this.highlight('up');
+			} else if (e.keyCode === 13) {
+				e.preventDefault();
+
+				_this.selectHighlighted();
+			}
+		};
+
+		this.onClick = function (e) {
+			if (e.target.classList.contains((0, _className2.default)(_this.baseClassName + '__suggestion-btn'))) {
+				_this.addItem(_this.data.find(function (d) {
+					return d.value === e.target.value;
+				}));
+				_this.clearSuggestions();
+				_this.input.value = '';
+			}
+		};
+
+		this.element = el;
+		this.baseClassName = 'm-multi-select';
+		this.currentFocus = -1;
+		this.name = this.element.getAttribute('data-multi-select-name');
+		this.input = this.element.querySelector('.js-' + this.baseClassName + '__input');
+		this.suggestionsBox = this.element.querySelector('.js-' + this.baseClassName + '-suggestions-box');
+		this.selectedItemsList = this.element.querySelector('.js-m-multi-select-selected-items');
+		this.selectedItems = [];
+		this.data = [];
+
+		this.getData();
+		this.attach();
 	}
-}
-
-// Add a selected item to the list of selected items
-function addSelectedItem(item) {
-	var selectedItemsList = document.querySelector('.js-m-multi-select-selected-items');
-	var newItem = document.createElement('li');
-	newItem.textContent = item + ' ';
-	newItem.classList.add(namespace + 'a-tag');
-	newItem.classList.add(namespace + 'm-multi-select__tag');
-
-	var removeBtn = document.createElement('button');
-	removeBtn.classList.add(namespace + 'm-multi-select-selected-items__remove-btn');
-
-	var buttonTextContainer = document.createElement('span');
-	buttonTextContainer.classList.add('u-visuallyhidden');
-	removeBtn.appendChild(buttonTextContainer);
-	buttonTextContainer.textContent = 'Ta bort ' + item; // Accessibility label for screen readers
-
-	// Event listener for removing the selected item
-	removeBtn.addEventListener('click', function () {
-		removeItem(newItem, Array.from(selectedItemsList.children).indexOf(newItem));
-	});
-	newItem.appendChild(removeBtn);
-	selectedItemsList.appendChild(newItem);
-}
-
-// Remove an item and manage focus appropriately
-function removeItem(item, index) {
-	var selectedItemsList = document.querySelector('.js-m-multi-select-selected-items');
-	selectedItemsList.removeChild(item);
-
-	var remainingItems = selectedItemsList.getElementsByTagName('div');
-	// Focus management: set focus to the next item, or the search input if no items left
-	if (remainingItems.length > 0) {
-		if (index < remainingItems.length) {
-			remainingItems[index].getElementsByTagName('button')[0].focus();
-		} else {
-			remainingItems[remainingItems.length - 1].getElementsByTagName('button')[0].focus();
+
+	_createClass(MultiSelect, [{
+		key: 'getData',
+		value: function getData() {
+			var id = this.input.getAttribute('data-multi-select-suggestions');
+			var el = document.getElementById(id);
+
+			if (!el) {
+				this.data = [];
+				return;
+			}
+
+			this.data = JSON.parse(el.textContent);
 		}
-	} else {
-		multiSelectInput.focus();
-	}
-}
-
-function setup(multiSelectElement) {
-	var multiSelectInput = multiSelectElement.querySelector('.js-' + className + '__input');
-	var suggestionsBox = multiSelectElement.querySelector('.js-' + className + '-suggestions-box');
-	var suggestionsData = multiSelectInput.getAttribute('data-multi-select-suggestions');
-
-	// Event listener for input changes in the search field
-	multiSelectInput.addEventListener('input', function () {
-		var value = this.value;
-		// Clear suggestions if less than 2 characters are typed
-		if (value.length < 2) {
-			suggestionsBox.innerHTML = '';
-			return;
+	}, {
+		key: 'attach',
+		value: function attach() {
+			this.input.addEventListener('input', this.onInput);
+			this.input.addEventListener('keydown', this.onKeyDown);
+			this.suggestionsBox.addEventListener('click', this.onClick);
 		}
+	}, {
+		key: 'setFocus',
+		value: function setFocus(index) {
+			this.currentFocus = index;
+		}
+	}, {
+		key: 'resetFocus',
+		value: function resetFocus() {
+			this.setFocus(-1);
+		}
+	}, {
+		key: 'clearSuggestions',
+		value: function clearSuggestions() {
+			this.suggestionsBox.innerHTML = '';
+		}
+	}, {
+		key: 'addSuggestions',
+		value: function addSuggestions(suggestions) {
+			var _this2 = this;
 
-		// Define JSON
-		var suggestions = document.getElementById(suggestionsData).textContent;
-		suggestions = JSON.parse(suggestions);
-
-		// Filter suggestions based on the input value
-		var filtered = suggestions.filter(function (item) {
-			return item.name.toLowerCase().startsWith(value.toLowerCase());
-		});
-		// Populate the suggestions box with the filtered results
-		suggestionsBox.innerHTML = filtered.map(function (item) {
-			return '<button class=\'' + namespace + 'm-multi-select__suggestion-btn\' tabindex=\'0\'>' + item.name + '</button>';
-		}).join('');
-		// Reset the current focus
-		currentFocus = -1;
-	});
+			this.data = [].concat(_toConsumableArray(this.data), _toConsumableArray(suggestions.filter(function (s) {
+				return !_this2.data.find(function (d) {
+					return d.value === s.value;
+				});
+			})));
+		}
+	}, {
+		key: 'filterData',
+		value: function filterData(query) {
+			var _this3 = this;
+
+			return this.data.filter(function (item) {
+				return item.name.toLowerCase().startsWith(query.toLowerCase());
+			}).filter(function (item) {
+				return !_this3.selectedItems.includes(item.name);
+			});
+		}
+	}, {
+		key: 'populateSuggestions',
+		value: function populateSuggestions(suggestions) {
+			var cls = (0, _className2.default)(this.baseClassName + '__suggestion-btn');
+			this.suggestionsBox.innerHTML = suggestions.map(function (item) {
+				return '<button class=\'' + cls + '\' tabindex=\'0\' value="' + item.value + '">' + item.name + '</button>';
+			}).join('');
+		}
+	}, {
+		key: 'removeItem',
+		value: function removeItem(item) {
+			var node = this.element.querySelector('.js-m-multi-select-selected-items li[data-value="' + item.value + '"]');
 
-	// Event listener for keydown events for navigation and selection in the suggestions box
-	multiSelectInput.addEventListener('keydown', function (e) {
-		var items = suggestionsBox.getElementsByClassName(namespace + 'm-multi-select__suggestion-btn');
-		// Navigate down in the suggestions list
-		if (e.keyCode == 40) {
-			currentFocus = (currentFocus + 1) % items.length;
-			setActive(items);
-			// Navigate up in the suggestions list
-		} else if (e.keyCode == 38) {
-			currentFocus = (currentFocus - 1 + items.length) % items.length;
-			setActive(items);
-			// Handle Enter key to select a focused item
-		} else if (e.keyCode == 13) {
-			e.preventDefault();
-			if (currentFocus > -1 && items[currentFocus]) {
-				addSelectedItem(items[currentFocus].textContent);
-				suggestionsBox.innerHTML = '';
-				multiSelectInput.value = '';
-				currentFocus = -1;
+			if (!node) {
+				return;
 			}
+
+			var parent = node.closest('.js-m-multi-select-selected-items');
+			var index = Array.prototype.indexOf.call(parent.children, node);
+
+			node.remove();
+
+			var remainingItems = parent.getElementsByTagName('li');
+
+			// Focus management: set focus to the next item, or the search input if no items left
+			if (remainingItems.length > 0) {
+				if (index < remainingItems.length) {
+					remainingItems[index].getElementsByTagName('button')[0].focus();
+				} else {
+					remainingItems[remainingItems.length - 1].getElementsByTagName('button')[0].focus();
+				}
+			} else {
+				this.input.focus();
+			}
+
+			this.selectedItems = this.selectedItems.filter(function (i) {
+				return i.value !== item.value;
+			});
+
+			var itemInput = this.element.querySelector('input[value="' + item.value + '"]');
+			itemInput.remove();
 		}
-	});
+	}, {
+		key: 'addItem',
+		value: function addItem(item) {
+			var _this4 = this;
+
+			if (!item) {
+				return;
+			}
+
+			var newItem = document.createElement('li');
+			newItem.textContent = item.name + ' ';
+			newItem.setAttribute('data-value', item.value);
+			newItem.classList.add((0, _className2.default)('a-tag'));
+			newItem.classList.add((0, _className2.default)(this.baseClassName + '__tag'));
+
+			var removeBtn = document.createElement('button');
+			removeBtn.classList.add((0, _className2.default)(this.baseClassName + '-selected-items__remove-btn'));
+
+			var buttonTextContainer = document.createElement('span');
+			buttonTextContainer.classList.add('u-visuallyhidden');
+			removeBtn.appendChild(buttonTextContainer);
+			buttonTextContainer.textContent = 'Ta bort ' + item.name; // Accessibility label for screen readers
+
+			// Event listener for removing the selected item
+			removeBtn.addEventListener('click', function () {
+				_this4.removeItem(item);
+			});
+
+			newItem.appendChild(removeBtn);
+
+			this.selectedItemsList.appendChild(newItem);
+			this.selectedItems.push(item);
+
+			var itemInput = document.createElement('input');
 
-	// Event listener for the suggestions box
-	suggestionsBox.addEventListener('click', function (e) {
-		// Add the clicked suggestion to the selected items list
-		if (e.target && e.target.classList.contains('suggestion-btn')) {
-			addSelectedItem(e.target.textContent);
-			suggestionsBox.innerHTML = '';
-			multiSelectInput.value = '';
+			itemInput.type = 'hidden';
+			itemInput.name = this.name + '[]';
+			itemInput.value = item.value;
+
+			this.element.appendChild(itemInput);
 		}
-	});
-}
+	}, {
+		key: 'removeHighlight',
+		value: function removeHighlight() {
+			var items = this.suggestionsBox.getElementsByClassName(this.baseClassName + '__suggestion-btn');
+
+			[].forEach.call(items, function (item) {
+				item.classList.remove('autocomplete-active');
+			});
+		}
+	}, {
+		key: 'highlight',
+		value: function highlight(direction) {
+			var items = this.suggestionsBox.getElementsByClassName(this.baseClassName + '__suggestion-btn');
+			var focus = this.currentFocus;
+
+			if (direction === 'down') {
+				focus = focus >= items.length - 1 ? 0 : focus + 1;
+			} else {
+				focus = focus <= 0 ? items.length - 1 : focus - 1;
+			}
+
+			this.setFocus(focus);
+			this.removeHighlight();
+
+			items[this.currentFocus].classList.add('autocomplete-active');
+			items[this.currentFocus].scrollIntoView({ block: 'nearest' });
+		}
+	}, {
+		key: 'selectHighlighted',
+		value: function selectHighlighted() {
+			var items = this.suggestionsBox.getElementsByClassName(this.baseClassName + '__suggestion-btn');
+
+			if (this.currentFocus > -1 && items[this.currentFocus]) {
+				var item = items[this.currentFocus];
+
+				this.addItem(this.data.find(function (d) {
+					return d.value === item.value;
+				}));
+
+				this.clearSuggestions();
+				this.input.value = '';
+				this.resetFocus();
+			}
+		}
+	}]);
+
+	return MultiSelect;
+}();
+
+var multiSelectElements = document.querySelectorAll('.js-m-multi-select');
 
 if (multiSelectElements) {
-	[].forEach.call(multiSelectElements, setup);
+	[].forEach.call(multiSelectElements, function (el) {
+		el.multiSelect = new MultiSelect(el);
+	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "4.0.12-beta.0.5",
+	"version": "4.0.13",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/components.js

@@ -35,4 +35,4 @@ import './atoms/range/range';
 import './assets/js/utmGenerator';
 import './assets/js/textToggle';
 import './assets/js/iconToggle';
-// import './molecules/multi-select/multi-select';
+import './molecules/multi-select/multi-select';

package/src/molecules/multi-select/_multi-select.scss

@@ -9,6 +9,10 @@
 		content: $namespace;
 	}
 
+	@include e(search) {
+		position: relative;
+	}
+
 	@include e(suggestions-box) {
 		position: absolute;
 		border-top: none;

package/src/molecules/multi-select/multi-select.js

@@ -1,134 +1,219 @@
-/* eslint-disable */
-const className = 'm-multi-select';
-const multiSelectElements = document.querySelectorAll(`.js-${className}`);
-let namespace;
+import className from '../../assets/js/className';
+
+class MultiSelect {
+	constructor(el) {
+		this.element = el;
+		this.baseClassName = 'm-multi-select';
+		this.currentFocus = -1;
+		this.name = this.element.getAttribute('data-multi-select-name');
+		this.input = this.element.querySelector(`.js-${this.baseClassName}__input`);
+		this.suggestionsBox = this.element.querySelector(`.js-${this.baseClassName}-suggestions-box`);
+		this.selectedItemsList = this.element.querySelector('.js-m-multi-select-selected-items');
+		this.selectedItems = [];
+		this.data = [];
+
+		this.getData();
+		this.attach();
+	}
 
-if( multiSelectElements ) {
-	namespace = getComputedStyle(multiSelectElements[0], ':before').content.replace(/["']/g, '');
-}
+	getData() {
+		const id = this.input.getAttribute('data-multi-select-suggestions');
+		const el = document.getElementById(id);
 
-let currentFocus = -1; // Tracks the currently focused item in the suggestions
+		if (!el) {
+			this.data = [];
+			return;
+		}
 
-// Highlight the active (focused) suggestion
-function setActive(items) {
-	if (!items.length) return false;
-	removeActive(items);
-	if (currentFocus >= items.length) currentFocus = 0;
-	if (currentFocus < 0) currentFocus = items.length - 1;
-	items[currentFocus].classList.add('autocomplete-active');
+		this.data = JSON.parse(el.textContent);
+	}
 
-	return items;
-}
+	attach() {
+		this.input.addEventListener('input', this.onInput);
+		this.input.addEventListener('keydown', this.onKeyDown);
+		this.suggestionsBox.addEventListener('click', this.onClick);
+	}
 
-// Remove highlighting from all suggestions
-function removeActive(items) {
-	for (let i = 0; i < items.length; i+=1) {
-		items[i].classList.remove('autocomplete-active');
+	setFocus(index) {
+		this.currentFocus = index;
 	}
-}
 
-// Add a selected item to the list of selected items
-function addSelectedItem(item) {
-	const selectedItemsList = document.querySelector('.js-m-multi-select-selected-items');
-	const newItem = document.createElement('li');
-	newItem.textContent = item + ' ';
-	newItem.classList.add(`${namespace}a-tag`);
-	newItem.classList.add(`${namespace}m-multi-select__tag`);
-
-	const removeBtn = document.createElement('button');
-	removeBtn.classList.add(`${namespace}m-multi-select-selected-items__remove-btn`);
-
-	const buttonTextContainer = document.createElement('span');
-	buttonTextContainer.classList.add('u-visuallyhidden');
-	removeBtn.appendChild(buttonTextContainer);
-	buttonTextContainer.textContent ='Ta bort ' + item; // Accessibility label for screen readers
-
-	// Event listener for removing the selected item
-	removeBtn.addEventListener('click', function () {
-		removeItem(newItem, Array.from(selectedItemsList.children).indexOf(newItem));
-	});
-	newItem.appendChild(removeBtn);
-	selectedItemsList.appendChild(newItem);
-}
+	resetFocus() {
+		this.setFocus(-1);
+	}
 
-// Remove an item and manage focus appropriately
-function removeItem(item, index) {
-	const selectedItemsList = document.querySelector('.js-m-multi-select-selected-items');
-	selectedItemsList.removeChild(item);
+	clearSuggestions() {
+		this.suggestionsBox.innerHTML = '';
+	}
 
-	let remainingItems = selectedItemsList.getElementsByTagName('div');
-	// Focus management: set focus to the next item, or the search input if no items left
-	if (remainingItems.length > 0) {
-		if (index < remainingItems.length) {
-			remainingItems[index].getElementsByTagName('button')[0].focus();
-		} else {
-			remainingItems[remainingItems.length - 1].getElementsByTagName('button')[0].focus();
-		}
-	} else {
-		multiSelectInput.focus();
+	addSuggestions(suggestions) {
+		this.data = [
+			...this.data,
+			...suggestions.filter((s) => !this.data.find((d) => d.value === s.value)),
+		];
+	}
+
+	filterData(query) {
+		return this.data
+			.filter((item) => item.name.toLowerCase().startsWith(query.toLowerCase()))
+			.filter((item) => !this.selectedItems.includes(item.name));
+	}
+
+	populateSuggestions(suggestions) {
+		const cls = className(`${this.baseClassName}__suggestion-btn`);
+		this.suggestionsBox.innerHTML = suggestions.map((item) => `<button class='${cls}' tabindex='0' value="${item.value}">${item.name}</button>`).join('');
 	}
-}
 
-function setup(multiSelectElement) {
-	const multiSelectInput = multiSelectElement.querySelector(`.js-${className}__input`);
-	const suggestionsBox = multiSelectElement.querySelector(`.js-${className}-suggestions-box`);
-	const suggestionsData = multiSelectInput.getAttribute('data-multi-select-suggestions');
+	onInput = () => {
+		const { value } = this.input;
 
-	// Event listener for input changes in the search field
-	multiSelectInput.addEventListener('input', function () {
-		const value = this.value;
 		// Clear suggestions if less than 2 characters are typed
 		if (value.length < 2) {
-			suggestionsBox.innerHTML = '';
+			this.clearSuggestions();
+
 			return;
 		}
 
-		// Define JSON
-		let suggestions = document.getElementById(suggestionsData).textContent;
-		suggestions = JSON.parse(suggestions);
+		const suggestions = this.filterData(value);
 
-		// Filter suggestions based on the input value
-		const filtered = suggestions.filter(item => item.name.toLowerCase().startsWith(value.toLowerCase()));
-		// Populate the suggestions box with the filtered results
-		suggestionsBox.innerHTML = filtered.map(item => `<button class='${namespace}m-multi-select__suggestion-btn' tabindex='0'>${item.name}</button>`).join('');
-		// Reset the current focus
-		currentFocus = -1;
-	});
+		this.populateSuggestions(suggestions);
+		this.resetFocus();
+	}
 
-	// Event listener for keydown events for navigation and selection in the suggestions box
-	multiSelectInput.addEventListener('keydown', function (e) {
-		let items = suggestionsBox.getElementsByClassName(`${namespace}m-multi-select__suggestion-btn`);
-		// Navigate down in the suggestions list
-		if (e.keyCode == 40) {
-			currentFocus = (currentFocus + 1) % items.length;
-			setActive(items);
-			// Navigate up in the suggestions list
-		} else if (e.keyCode == 38) {
-			currentFocus = (currentFocus - 1 + items.length) % items.length;
-			setActive(items);
-			// Handle Enter key to select a focused item
-		} else if (e.keyCode == 13) {
-			e.preventDefault();
-			if (currentFocus > -1 && items[currentFocus]) {
-				addSelectedItem(items[currentFocus].textContent);
-				suggestionsBox.innerHTML = '';
-				multiSelectInput.value = '';
-				currentFocus = -1;
+	removeItem(item) {
+		const node = this.element.querySelector(`.js-m-multi-select-selected-items li[data-value="${item.value}"]`);
+
+		if (!node) {
+			return;
+		}
+
+		const parent = node.closest('.js-m-multi-select-selected-items');
+		const index = Array.prototype.indexOf.call(parent.children, node);
+
+		node.remove();
+
+		const remainingItems = parent.getElementsByTagName('li');
+
+		// Focus management: set focus to the next item, or the search input if no items left
+		if (remainingItems.length > 0) {
+			if (index < remainingItems.length) {
+				remainingItems[index].getElementsByTagName('button')[0].focus();
+			} else {
+				remainingItems[remainingItems.length - 1].getElementsByTagName('button')[0].focus();
 			}
+		} else {
+			this.input.focus();
 		}
-	});
 
-	// Event listener for the suggestions box
-	suggestionsBox.addEventListener('click', function (e) {
-		// Add the clicked suggestion to the selected items list
-		if (e.target && e.target.classList.contains('suggestion-btn')) {
-			addSelectedItem(e.target.textContent);
-			suggestionsBox.innerHTML = '';
-			multiSelectInput.value = '';
+		this.selectedItems = this.selectedItems
+			.filter((i) => i.value !== item.value);
+
+		const itemInput = this.element.querySelector(`input[value="${item.value}"]`);
+		itemInput.remove();
+	}
+
+	addItem(item) {
+		if (!item) {
+			return;
 		}
-	});
+
+		const newItem = document.createElement('li');
+		newItem.textContent = `${item.name} `;
+		newItem.setAttribute('data-value', item.value);
+		newItem.classList.add(className('a-tag'));
+		newItem.classList.add(className(`${this.baseClassName}__tag`));
+
+		const removeBtn = document.createElement('button');
+		removeBtn.classList.add(className(`${this.baseClassName}-selected-items__remove-btn`));
+
+		const buttonTextContainer = document.createElement('span');
+		buttonTextContainer.classList.add('u-visuallyhidden');
+		removeBtn.appendChild(buttonTextContainer);
+		buttonTextContainer.textContent = `Ta bort ${item.name}`; // Accessibility label for screen readers
+
+		// Event listener for removing the selected item
+		removeBtn.addEventListener('click', () => {
+			this.removeItem(item);
+		});
+
+		newItem.appendChild(removeBtn);
+
+		this.selectedItemsList.appendChild(newItem);
+		this.selectedItems.push(item);
+
+		const itemInput = document.createElement('input');
+
+		itemInput.type = 'hidden';
+		itemInput.name = `${this.name}[]`;
+		itemInput.value = item.value;
+
+		this.element.appendChild(itemInput);
+	}
+
+	removeHighlight() {
+		const items = this.suggestionsBox.getElementsByClassName(`${this.baseClassName}__suggestion-btn`);
+
+		[].forEach.call(items, (item) => {
+			item.classList.remove('autocomplete-active');
+		});
+	}
+
+	highlight(direction) {
+		const items = this.suggestionsBox.getElementsByClassName(`${this.baseClassName}__suggestion-btn`);
+		let focus = this.currentFocus;
+
+		if (direction === 'down') {
+			focus = (focus >= items.length - 1) ? 0 : focus + 1;
+		} else {
+			focus = (focus <= 0) ? items.length - 1 : focus - 1;
+		}
+
+		this.setFocus(focus);
+		this.removeHighlight();
+
+		items[this.currentFocus].classList.add('autocomplete-active');
+		items[this.currentFocus].scrollIntoView({ block: 'nearest' });
+	}
+
+	selectHighlighted() {
+		const items = this.suggestionsBox.getElementsByClassName(`${this.baseClassName}__suggestion-btn`);
+
+		if (this.currentFocus > -1 && items[this.currentFocus]) {
+			const item = items[this.currentFocus];
+
+			this.addItem(this.data.find((d) => d.value === item.value));
+
+			this.clearSuggestions();
+			this.input.value = '';
+			this.resetFocus();
+		}
+	}
+
+	onKeyDown = (e) => {
+		if (e.keyCode === 40) {
+			this.highlight('down');
+		} else if (e.keyCode === 38) {
+			this.highlight('up');
+		} else if (e.keyCode === 13) {
+			e.preventDefault();
+
+			this.selectHighlighted();
+		}
+	}
+
+	onClick = (e) => {
+		if (e.target.classList.contains(className(`${this.baseClassName}__suggestion-btn`))) {
+			this.addItem(this.data.find((d) => d.value === e.target.value));
+			this.clearSuggestions();
+			this.input.value = '';
+		}
+	}
 }
 
+const multiSelectElements = document.querySelectorAll('.js-m-multi-select');
+
 if (multiSelectElements) {
-	[].forEach.call(multiSelectElements, setup);
+	[].forEach.call(multiSelectElements, (el) => {
+		el.multiSelect = new MultiSelect(el);
+	});
 }