CODEWITHSUNDEEP
javascripthtml
Frallen
Frallen

Reputation: 433

live search in input with checkbox filter value

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>

enter image description here

Upvotes: 1

Views: 5714

Answers (2)

Lars Flieger
Lars Flieger

Reputation: 2554

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

Upvotes: 5

Mister Jojo
Mister Jojo

Reputation: 22320

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>

Upvotes: 2

Related Questions