CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dreams
Dreams

Reputation: 8506

How to only search data only in one div area?

$(document).ready(function(){

  $(function(){
    var roles = ["Admin", "User", "Dealer", "Agent", "Buyer", "Guest", "User", "Dealer", "Agent"];

    $.each(roles, function(){
      $(".role_wrapper_2").append("<div class='roles_approval'><span>" + this + "</span></div>");
    });
  });

  $(".role-search-approval").on("keyup", function() {
    var value = this.value.toLowerCase();
      $(".roles_approval").each(function() {
          if($(this).text().toLowerCase().indexOf(value) !== -1) {
              $(this).show();
          } else {
              $(this).hide();    
          }
      });
  });


  $(function(){
    $(document).on('click', '.role_wrapper_2 .roles_approval', function(){
      var role= $(this)
      $('.role_wrapper_1').append(role);
      $(this).find("img").attr('src', 'images/02_button_minus.png');
    });
  });

  $(function(){
    $(document).on('click', '.role_wrapper_1 .roles_approval', function(){
      var role = $(this)
      $('.role_wrapper_2').append(role);
      $(this).find("img").attr('src', 'images/02_button_add.png');
    });
  });
});
.role_wrapper_1 {
  width:200px;
  height:200px;
  border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="role_wrapper_1"></div>
<div class="role_wrapper_2">
  <div class="admin2_search">
    <form action="#" method="post">
      <input class="role-search-approval" type="search" placeholder="Enter your keyword">
    </form>
  </div><!-- search_area end  -->
</div>

Now, I have a "wrapper_2" area and also have search function. If I click on item which in "wrapper_2" , the item will add to "wrapper_1".

However, when I input some keyword to search, both of "wrapper_1" and "wrapper_2" will hide the wrong day.

What can I do to only hide the data under div "wrapper_2"?

Upvotes: 2

Views: 54

Answers (1)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Your keyup function slight modification as below:

DEMO

$(".role-search-approval").on("keyup", function() {
    var value = this.value.toLowerCase();
      $(".role_wrapper_2 .roles_approval").each(function() { 
          //Just loop for those items which are in .role_wrapper_2
          if($(this).text().toLowerCase().indexOf(value) !== -1) {
              $(this).show();
          } else {
              $(this).hide();    
          }
    });
});

What was happening?

You were just adding one element to wrapper_1 from wrapper_2 and that element contained all the necessary classes while appending and on your $.each even that class was taken count which was appended to wrapper_1. So you just need to say which wrapper's element you need to filter!! By specifying its parent element you can filter those class in $.each

Upvotes: 4

Related Questions