change the select option to an input search
Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>remotes/1693381142243034077/jamesk-patch-1
parent
9f6f327670
commit
f042ba3787
@ -0,0 +1,69 @@
|
||||
.member-value,
|
||||
.member-list {
|
||||
width: 100%;
|
||||
}
|
||||
.member-value {
|
||||
font-weight: 600;
|
||||
letter-spacing: 4px;
|
||||
height: 4rem;
|
||||
font-size: 1.1rem;
|
||||
padding: 1rem;
|
||||
color: #ffffff;
|
||||
background-color: #2566f4;
|
||||
border: 3px solid transparent;
|
||||
transition: .3s ease-in-out;
|
||||
&::-webkit-input-placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #2566f4;
|
||||
cursor: pointer;
|
||||
&::-webkit-input-placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&.open {
|
||||
box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);
|
||||
outline: 0;
|
||||
color: #ffffff;
|
||||
background-color: #2566f4;
|
||||
&::-webkit-input-placeholder {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.member-list {
|
||||
list-style: none;
|
||||
box-shadow: 0px 5px 8px 0px rgba(0,0,0,0.2);
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: .3s ease-in-out;
|
||||
&.open {
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
height: 4rem;
|
||||
color: #ffffff;
|
||||
background-color: #2566f4;
|
||||
padding: 1rem;
|
||||
font-size: 1.1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background-color .3s;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
color: #2566f4;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
&.closed {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
'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 state';
|
||||
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');
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue