JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" id="txt"/>
<select multiple="true" id="testSelect">
</select>
CSS
#testSelect {
height: 300px;
}
JavaScript
for (var i = 0; i < 10; i++) {
$("#testSelect").append("<option value='value" + i + "'>value " + i + "</option>");
}
$("#txt").on("keyup", function() {
var options = document.getElementById("testSelect").options;
var value = this.value;
for (var i = 0; i < options.length; i++) {
var x = options[i].value.indexOf(value) >= 0;
options[i].style.display = (x ? "block" : "none");
options[i].disabled = !x;
console.log(options[i].style.display);
}
// $("#testSelect OPTION"[value*='" + this.value + "']").css("display", "block");
// $("#testSelect OPTION:not([value*='" + this.value + "'])").css("display", "none");
console.log(this.value);
});