I have a select in which the checkbox is located, it also contains an input through which I want to find the necessary items. I did the search like this, first I accept an array and then lowercase it and search for matches. Somehow I need to match the required id to exclude unavailable ones and display the necessary checkboxes
In simple terms, I want to filter my query and display it in real time.
I must use only vanila JS
let search = document.getElementById("search");
let s = document.querySelectorAll("input[type=checkbox][name=one]");
//s.forEach((item) => {
search.addEventListener("input", () => {
let data = [];
let count = Array.from(s).map((i) => i.value.toLowerCase().includes(search.value.toLowerCase())
);
console.log(count);
});
//});
<div id="checkboxes2">
<div class="control">
<input
class="input"
type="text"
placeholder="Поиск"
id="search"
/>
<span class="icon is-small is-left">
<span class="searchIcon"></span>
</span>
</div>
<label for="one2" class="select_label">
<input type="checkbox" value="Показать все" name="one" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one2" class="select_label">
<input type="checkbox" value="Показать все" name="one" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one2" class="select_label">
<input type="checkbox" value="Показать все" name="one" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one2" class="select_label">
<input type="checkbox" value="Показать все" name="one" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one2" class="select_label">
<input type="checkbox" name="one2" id="one2" />Показать все
<span class="select_label-icon"></span
></label>
<label for="one3" class="select_label">
<input type="checkbox" value="Наименование лекарства" name="one" id="one3" />Наименование лекарства
<span class="select_label-icon"></span
></label>
<label for="one4" class="select_label">
<input type="checkbox" value="Наименование лекарства" name="one" id="one4" />Наименование лекарства
<span class="select_label-icon"></span
></label>
<label for="one5" class="select_label">
<input type="checkbox" value="Наименование лекарства в две длинных строки" name="one" id="one5" />Наименование лекарства
в две длинных строки <span class="select_label-icon"></span
></label>
</div>