I have a code:
<form>
<p>Filter by category<br />
<input type="text" id="searchz" name="search" value="-- " style="margin: 10px;width: 165px;" onkeyup="filter(this.value)">
<button type="button" onclick="ClearFields();">Clear search</button>
</form>
When call a function:
<?php echo $lists['categories'];?>
That function displays code like:
<select id="category_id">
<option>category_name</option>
<option>-- subcategory_name</option>
<option>-- subcategory_name</option>
<option>-- subcategory_name</option>
<option>-- subcategory_name</option>
<option>-- subcategory_name</option>
<option>-- subcategory_name</option>
<option>-- subcategory_name</option>
<option>-- subcategory_name</option>
</select>
And i have script that works:
<script>
function filter(keyword) {
var select = document.getElementById("category_id");
for (var i = 0; i < select.length; i++) {
var txt = select.options[i].text;
var include = txt.toLowerCase().startsWith(keyword.toLowerCase());
select.options[i].style.display = include ? 'list-item':'none';
}
}
function ClearFields() {
document.getElementById("searchz").value = "";
}
</script>
But script filtering only for first letters and symbols, and for find subcategory i need to type in filter input "-- subcategory name" Need filtering by any word or letter/symbol of option value, thanks.