JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style>
#virtual_select a, input { margin: 10px; }
.selected { background: yellow; }
.hidden { display: none; }
</style>
<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
<script>
(() => {
const application = Stimulus.Application.start()
application.register("activity", class extends Stimulus.Controller {
static get targets() {
return [ "filter", "select", "virtualSelect" ]
}
connect() {
const select = this.selectTarget;
const virtualSelect = this.virtualSelectTarget;
for (var i = 0; i < select.options.length; i = i + 1) {
this.addSelectOption(select.options[i], virtualSelect);
}
select.style.display = "none";
this.showOrHideOptionButton();
}
showOrHideOptionButton() {
const filter = this.filterTarget;
const virtualSelect = this.virtualSelectTarget;
var search = filter.value.toLowerCase();
for (var i = 0; i < virtualSelect.children.length; i = i + 1) {
const link = virtualSelect.children[i];
if (link.innerText.toLowerCase().indexOf(search) >= 0) {
link.classList.remove("hidden");
} else {
link.classList.add("hidden");
}
}
}
addSelectOption(option, element) {
const virtualSelect = this.virtualSelectTarget;
const el = document.createElement("a");
el.href = "#";
el.dataset.action = "click->activity#enableOrDisableOption";
el.innerText = option.text;
el.data
if(option.selected) {
el.classList.add("selected");
}
virtualSelect.appendChild(el);
}
enableOrDisableOption(event) {
event.preventDefault();
event.stopImmediatePropagation();
const select = this.selectTarget;
...