Как я могу скрыть метки и флажки при поиске с Jquery?

Question

извините за мой плохой английский sh.

Я пытаюсь найти страницу с ярлыками и флажками. Но я не могу скрыть флажки и метки, когда я ищу. Затем я хочу, чтобы все метки и флажки появлялись, когда входные данные для поиска пусты. У меня есть класс для моих лейблов, но он не работает.

Как я могу сделать это с Jquery?

Кто-нибудь может помочь? Спасибо:)

$(document).on("input", "#searchColumn", function() {

  var v = $(this).val();
  var elem = $(":checkbox").filter(function() {
    return (new RegExp(v, 'i')).test(this.value);
  });

  if (elem.val()) {
    $(elem).show();
    $(":checkbox").not(elem).hide();
  } else {
    $(":checkbox").hide();
  }
});

.ccontainer {
  margin: 0px auto 0 auto;
  width: 100%;
  text-align: center;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  display: inline-block;
  position: relative;
  border-radius: 40px;
  padding: 10px 40px;
  width: 10%;
  background: #eeeeee;
  font-weight: 600;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}

input[type=checkbox]+label:hover {
  background: #e4e4e4;
}

input[type=checkbox]:checked+label {
  background: #003B46;
  color: #f0f0f0;
}

input[type=checkbox]:checked+label div.checkmark {
  display: block;
  fill: #f0f0f0;
}

@keyframes btn-color {
  0% {
    background: #88d3a6;
  }
  50% {
    background: #5dc386;
  }
  100% {
    background: #3ea868;
  }
}

<div class="ccontainer">
  <center><input class="form-control mb-3" id="searchColumn" type="text" placeholder="Search in interests" value="" style="width: 50%;"><br></center>
  <input type="checkbox" id="Checkbox1" name="Checkbox1" value="Drawing">
  <label for="Checkbox1" class="myLabel"><span class="label-name">Drawing</span></label>

  <input type="checkbox" id="Checkbox2" name="Checkbox2" value="Swimming">
  <label for="Checkbox2"><span class="label-name">Swimming</span></label>

  <input type="checkbox" id="Checkbox3" name="Checkbox3" value="Dancing">
  <label for="Checkbox3"><span class="label-name">Dancing</span></label>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Вот гораздо более простое решение с использованием метода jQuery .toggleClass().

• Оберните INPUT и SPAN в LABEL (и соответственно измените CSS)
• добавьте атрибут data-filter к каждой метке

$(document).on("input", "#searchColumn", function() {

  const v = $.trim($(this).val()); 

  $("[data-filter]").each(function(){
    $(this).toggleClass('is-hidden', !new RegExp(v, 'i').test($(this).data('filter')));
  });
  
});

.ccontainer {
  margin: 0px auto 0 auto;
  width: 100%;
  text-align: center;
}

input[type=checkbox] {
  position: absolute;
  opacity: 0;
}

input[type=checkbox]+span {
  display: inline-block;
  position: relative;
  border-radius: 40px;
  padding: 10px 40px;
  width: 10%;
  background: #eeeeee;
  font-weight: 600;
  font-size: 13px;
  color: #444;
  cursor: pointer;
  transition: background 0.23s;
}

input[type=checkbox]+span:hover {
  background: #e4e4e4;
}

input[type=checkbox]:checked+span {
  background: #003B46;
  color: #f0f0f0;
}

.is-hidden {
  display: none;
}

<div class="ccontainer">
  <input class="form-control mb-3" id="searchColumn" type="text" placeholder="Search in interests" value="" style="width: 50%;">
  
  <br>
  
  <label data-filter="drawing">
    <input type="checkbox" name="Checkbox1" value="Drawing">
    <span class="label-name">Drawing</span>
  </label>
  <label data-filter="swimming">
    <input type="checkbox" name="Checkbox2" value="Swimming">
    <span class="label-name">Swimming</span>
  </label>
  <label data-filter="dancing">
    <input type="checkbox" name="Checkbox3" value="Dancing">
    <span class="label-name">Dancing</span>
  </label>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

PS: также позаботьтесь о том, что делать, если выбрать флажок, но затем он отфильтрован ...

Answer 2

$(document).on("input", "#searchColumn", function() {
  var v = $(this).val();
  $(":checkbox").removeClass('hide');
  if (v != '') {
    var elem = $(":checkbox").filter(function() {
      return (new RegExp(v, 'i')).test(this.value);
    });
    if (elem.val()) {
      $(elem).show();
      $(":checkbox").not(elem).hide();
      $(":checkbox").not(elem).addClass('hide');
    } else {
      $(":checkbox").hide();
    }
  } else {
    $(":checkbox").hide();
  }
});

.ccontainer {
  margin: 0px auto 0 auto;
  width: 100%;
  text-align: center;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  display: inline-block;
  position: relative;
  border-radius: 40px;
  padding: 10px 40px;
  width: 10%;
  background: #eeeeee;
  font-weight: 600;
  font-size: 13px;
  color: #444;
  cursor: pointer;
}

input[type=checkbox]+label:hover {
  background: #e4e4e4;
}

input[type=checkbox]:checked+label {
  background: #003B46;
  color: #f0f0f0;
}

input[type=checkbox]:checked+label div.checkmark {
  display: block;
  fill: #f0f0f0;
}

@keyframes btn-color {
  0% {
    background: #88d3a6;
  }
  50% {
    background: #5dc386;
  }
  100% {
    background: #3ea868;
  }
}

input.hide+label {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ccontainer">
  <center><input class="form-control mb-3" id="searchColumn" type="text" placeholder="Search in interests" value="" style="width: 50%;"><br></center>
  <input type="checkbox" id="Checkbox1" name="Checkbox1" value="Drawing">
  <label for="Checkbox1" class="myLabel">
              <span class="label-name">Drawing</span>
              
            </label>

  <input type="checkbox" id="Checkbox2" name="Checkbox2" value="Swimming">
  <label for="Checkbox2">
              <span class="label-name">Swimming</span>
            </label>

  <input type="checkbox" id="Checkbox3" name="Checkbox3" value="Dancing">
  <label for="Checkbox3">
              <span class="label-name">Dancing</span>
              
            </label>
</div>