JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style>
#virtual_select a, input { margin: 10px; }
.selected { background: yellow; }
.hidden { display: none; }
</style>
<script>
var VisualSelect = function(selectId, virtualSelectId, filterId) {
var select = document.getElementById(selectId);
var virtualSelect = document.getElementById(virtualSelectId);
var filter = document.getElementById(filterId);
var links = [];
initializeSelect();
initializeFilter();
function initializeSelect() {
for (var i = 0; i < select.options.length; i = i + 1) {
addSelectOption(select.options[i], virtualSelect);
}
select.style.display = "none";
}
function initializeFilter() {
filter.oninput = showOrHideOptionButton;
}
function addSelectOption(option, element) {
var el = document.createElement("a");
var id = selectId + "-option-" + option.value
el.href = "#";
el.id = id
el.innerText = option.text;
el.onclick = function () {
enableOrDisableOption(option, this);
};
if(option.selected) {
el.classList.add("selected");
}
virtualSelect.appendChild(el);
links.push(el);
}
function enableOrDisableOption(option, button) {
if (option.selected) {
button.classList.remove("selected");
option.selected = false;
} else {
button.classList.add("selected");
option.selected = true;
}
clearFilterSearch();
}
function showOrHideOptionButton() {
var search = this.value.toLowerCase();
for (var i = 0; i < links.length; i = i + 1) {
var link = links[i];
if (link.innerText.toLowerCase().indexOf(search) >= 0) {
link.classList.remove("hidden");
} else {
link.classList.add("hidden");
}
}
}
function clearFilterSearch()...