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

});
//});

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>

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

});
//});

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>

• javascript
• html

Share Improve this question Follow edited Dec 14, 2021 at 18:03 Mister Jojo 22.5k66 gold badges2525 silver badges4444 bronze badges asked Dec 14, 2021 at 17:58 FrallenFrallen 44311 gold badge55 silver badges1818 bronze badges 6

• So you want to be able to filter the select options based on the search? – Lars Flieger Commented Dec 14, 2021 at 18:01
• @LarsFlieger Yes, I want to enter data and receive only suitable checkboxes – Frallen Commented Dec 14, 2021 at 18:03
• So filter()? not map() – epascarello Commented Dec 14, 2021 at 18:15
• 1 Your HTML is not valid, all checkBoxes MUST HAVE différents names value! – Mister Jojo Commented Dec 14, 2021 at 18:46
• @MisterJojo I know I'm just making an interface and doing it for example. – Frallen Commented Dec 14, 2021 at 18:49

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

Try this:

const search = document.getElementById("search");
const labels = document.querySelectorAll("#checkboxes2 > label");

search.addEventListener("input", () => Array.from(labels).forEach((element) => element.style.display = element.childNodes[1].id.toLowerCase().includes(search.value.toLowerCase()) ? "inline" : "none"))

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

• I use the ids to pare with the search query. (You can change that as well)
• I use style to display the element or not. (You could also sort or hide them otherwise)

siply using correct names on your checkboxes :

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>