change the select option to an input search

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
jamesk-patch-1
Toshaan Bharvani 3 years ago
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');
}
});

@ -61,6 +61,9 @@
{{ $changelogjavascript := resources.Get "js/changelog.js" }} {{ $changelogjavascript := resources.Get "js/changelog.js" }}
{{ $changelogjs := $changelogjavascript | resources.Minify }} {{ $changelogjs := $changelogjavascript | resources.Minify }}
<script src="{{ $changelogjs.RelPermalink }}"></script> <script src="{{ $changelogjs.RelPermalink }}"></script>
{{ $selectjavascript := resources.Get "js/select.js" }}
{{ $selectjs := $selectjavascript | resources.Minify }}
<script src="{{ $selectjs.RelPermalink }}"></script>
{{ if .Site.Params.analytics.piwik }} {{ if .Site.Params.analytics.piwik }}
{{ partial "_analytics/piwik.html" . }} {{ partial "_analytics/piwik.html" . }}
{{ end }} {{ end }}

@ -42,7 +42,8 @@
{{ $pages := resources.Get "css/pages.scss" }} {{ $pages := resources.Get "css/pages.scss" }}
{{ $footer := resources.Get "css/footer.scss" }} {{ $footer := resources.Get "css/footer.scss" }}
{{ $changelog := resources.Get "css/changelog.scss" }} {{ $changelog := resources.Get "css/changelog.scss" }}
{{ $scss := slice $variables $header $promo $home $groups $ready $bod $timeline $pages $footer $changelog | resources.Concat "css/custom.scss" }} {{ $forms := resources.Get "css/forms.scss" }}
{{ $scss := slice $variables $header $promo $home $groups $ready $bod $timeline $pages $footer $changelog $forms | resources.Concat "css/custom.scss" }}
{{ $css := $scss | toCSS (dict "targetPath" "css/custom.min.css" "outputStyle" "compressed" "enableSourceMap" true) }} {{ $css := $scss | toCSS (dict "targetPath" "css/custom.min.css" "outputStyle" "compressed" "enableSourceMap" true) }}
{{ $minicss := $css | resources.Minify }} {{ $minicss := $css | resources.Minify }}
<link rel="stylesheet" href="{{ $minicss.RelPermalink }}"> <link rel="stylesheet" href="{{ $minicss.RelPermalink }}">

@ -41,11 +41,12 @@ var goal = "{{ .Site.Params.forms.passport.goal }}";
</div> </div>
<div class="form-row"> <div class="form-row">
<div class="form-group col-lg-12"> <div class="form-group col-lg-12">
<select name="member" id="member"> <input name="member" id="member" class="member-value" placeholder="Member Entiry Affiliation" value="">
{{ range sort (where .Site.RegularPages "Section" "members") }} <ul class="member-list">
<option value="{{ .Title }}">{{ .Title }}</option> {{ range sort (where .Site.RegularPages "Section" "members") "Title" }}
<li>{{ .Title }}</li>
{{ end }} {{ end }}
</select> </ul>
</div> </div>
</div> </div>
<div class="form-row"> <div class="form-row">

Loading…
Cancel
Save