forked from website/openpower.foundation
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
'use strict';
|
|
var inputField = document.querySelector('.member-value');
|
|
var dropdown = document.querySelector('.member-list');
|
|
var dropdownArray = [].concat(document.querySelectorAll('li'));
|
|
var dropdownItems = dropdownArray[0];
|
|
var valueArray = [];
|
|
dropdownItems.forEach(function (item) {
|
|
valueArray.push(item.textContent);
|
|
});
|
|
var closeDropdown = function closeDropdown() {
|
|
dropdown.classList.remove('open');
|
|
};
|
|
inputField.addEventListener('input', function () {
|
|
dropdown.classList.add('open');
|
|
var inputValue = inputField.value.toLowerCase();
|
|
var valueSubstring = undefined;
|
|
if (inputValue.length > 0) {
|
|
for (var j = 0; j < valueArray.length; j++) {
|
|
if (!(inputValue.substring(0, inputValue.length) === valueArray[j].substring(0, inputValue.length).toLowerCase())) {
|
|
dropdownItems[j].classList.add('closed');
|
|
} else {
|
|
dropdownItems[j].classList.remove('closed');
|
|
}
|
|
}
|
|
} else {
|
|
for (var i = 0; i < dropdownItems.length; i++) {
|
|
dropdownItems[i].classList.remove('closed');
|
|
}
|
|
}
|
|
});
|
|
dropdownItems.forEach(function (item) {
|
|
item.addEventListener('click', function (evt) {
|
|
inputField.value = item.textContent;
|
|
dropdownItems.forEach(function (dropdown) {
|
|
dropdown.classList.add('closed');
|
|
});
|
|
});
|
|
});
|
|
inputField.addEventListener('focus', function () {
|
|
inputField.placeholder = 'Type to filter';
|
|
dropdown.classList.add('open');
|
|
dropdownItems.forEach(function (dropdown) {
|
|
dropdown.classList.remove('closed');
|
|
});
|
|
});
|
|
inputField.addEventListener('blur', function () {
|
|
inputField.placeholder = 'Select Member Entity';
|
|
dropdown.classList.remove('open');
|
|
});
|
|
document.addEventListener('click', function (evt) {
|
|
var isDropdown = dropdown.contains(evt.target);
|
|
var isInput = inputField.contains(evt.target);
|
|
if (!isDropdown && !isInput) {
|
|
dropdown.classList.remove('open');
|
|
}
|
|
});
|