Jquery: filter data from HTML attribute and show/hide result

user_7856807 0
Viewed 101

I have an inputbox that allows the user to search for a contact based on the contact number or contact name and I want the search result display only if it is matched with either name or number. The contact number is storing in the data attribute data-contact-id and the name is displayed inside label tag.

But I am stuck here. Below are the simple structure of data.

JSFiddle

$('#input_search').on("keyup", function() {
  var user_input = $(this).val().toLowerCase();
  
  // Stuck here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="search-container">
  <input type="text" placeholder="Search for contact" id="input_search">
</div>
<div class="forward-body">
  <div class="model" data-contact-id="44">
    <label class="label-name">cccc1</label>
  </div>

  <div class="model" data-contact-id="555888">
    <label class="label-name">Jason</label>
  </div>

  <div class="model" data-contact-id="alibaba
">
    <label class="label-name">AliBABA
    </label>
  </div>

  <div class="model" data-contact-id="221222">
    <label class="label-name">Wababa wakanda</label>
  </div>

  <div class="model" data-contact-id="123123
">
    <label class="label-name">Alibaba Wababa
    </label>
  </div>

  <div class="model" data-contact-id="9">
    <label class="label-name">testing_9</label>
  </div>

  <div class="model" data-contact-id="6">
    <label class="label-name">data_number_6</label>
  </div>

  <div class="model" data-contact-id="5">
    <label class="label-name">data_number5</label>
  </div>
</div>

jquery
1 Answers

You can loop through all .model divs using .each then check if the value enter by user matches either attribute or label depending on this show that model div else hide.

Demo Code :

$('.search-container input#input_ssearch').on("keyup", function() {
  var number = $(this).val().toLowerCase();
  if (number != "") {
    $(".model").hide(); //hide all model divs
    //loop through model divs
    $(".model-container .model").each(function() {
      //check if value input matches attr or label
      if (($(this).attr('data-contact-id') == number) || ($(this).find('label.forward-message-contactname').text().toLowerCase().trim() == number)) {
        $(this).show() //show that
      }

    })
  } else {
    $(".model").show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="model-container">
  <div class="search-container">
    <i class="fa fa-search bigger-130"></i>
    <input type="text" placeholder="Search for contacts" id="input_ssearch">
  </div>
  <div class="forward-body">
    <div class="col-md-12 col-xs-12 model" data-contact-id="44">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">cccc1</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="Sad">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">Sad</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="AliBABA
">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">AliBABA
      </label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="9">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">9</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="6">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">6</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="5">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">5</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="44">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">cccc1</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="Sad">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">Sad</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="AliBABA
">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">AliBABA
      </label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="9">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">9</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="6">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">6</label>
    </div>

    <div class="col-md-12 col-xs-12 model" data-contact-id="5">
      <input class="col-md-1 col-xs-1" type="checkbox" id="forward-message-checkbox" name="forward message">
      <label class="col-md-11 col-xs-11 forward-message-contactname">5</label>
    </div>
  </div>
</div>

user_106064000
Related