使用復選框過濾器值在輸入中進行實時搜索

Question

我有一個 select 復選框位於其中，它還包含一個輸入，我想通過它找到必要的項目。 我做了這樣的搜索，首先我接受一個數組，然后將其小寫並搜索匹配項。 不知何故，我需要匹配所需的 id 以排除不可用的 id 並顯示必要的復選框

簡單來說，我想過濾我的查詢並實時顯示。

我必須只使用 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); }); //});

 label { display: block; }

 <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>

Answer 1

嘗試這個：

 const search = document.getElementById("search"); const labels = document.querySelectorAll("#checkboxes2 > label"); search.addEventListener("input", () => { let count = Array.from(labels).forEach((i) => { const element = i if (.element.childNodes[1].id.toLowerCase().includes(search.value)) element.style.display = "none" else element.style.display = "block" }) })

 <div id="checkboxes2"> <div class="control"> <input class="input" type="text" placeholder="Search" id="search" /> <span class="icon is-small is-left"> <span class="searchIcon"></span> </span> </div> <label for="car" class="select_label"> <input type="checkbox" value="Car" name="one" id="car" />Car <span class="select_label-icon"></span> </label> <label for="house" class="select_label"> <input type="checkbox" value="House" name="one" id="house" />House <span class="select_label-icon"></span> </label> <label for="nice" class="select_label"> <input type="checkbox" value="Nice" name="one" id="nice" />nice <span class="select_label-icon"></span> </label> <label for="beach" class="select_label"> <input type="checkbox" value="Beach" name="one" id="beach" />Beach <span class="select_label-icon"></span> </label> </div>

• 我使用id 與搜索查詢進行比較。 （你也可以改變它）
• 我使用樣式來顯示元素與否。 （您也可以對它們進行排序或隱藏）

Answer 2

在您的復選框上簡單地使用正確的名稱：

 const SearchInput = document.querySelector('input#search'), ChkBxForm = document.querySelector('#ChkBx-form'); ChkBxForm.onsubmit = e => e.preventDefault() // disable the natural form submit SearchInput.oninput =()=> { let checkedBoxes = Object.fromEntries(new FormData(ChkBxForm).entries()) console.clear( ) console.log( checkedBoxes ) }

 <input class="input" type="text" placeholder="Search" id="search" /> <form id="ChkBx-form"> <label> <input type="checkbox" name="car" />Car </label> <label> <input type="checkbox" name="house" />House </label> <label> <input type="checkbox" name="nice" />nice </label> <label> <input type="checkbox" name="beach" />Beach </label> </form>