Show Div's based on user input

Question

I am working on one of the requirement, where I have to show div based on user input. Below is the code structure.

<input id="location-filter" type="text">

<div class="item">
   <div class="item-image">
      <a href="">
         <img class="img-fluid" src=""> 
         <div class="item-badges"></div>
         <div class="item-meta">
            <div class="item-price">
               <small></small>
            </div>
         </div>
      </a>
   </div>
   <div class="item-info">
      <h3 class="item-title"><a href=""></a></h3>
      <div class="item-location">
         <i class="fa fa-map-marker "></i>
         <p>London</p>
      </div>
      <div class="item-details-i"> 
         <span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
         <span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
         <span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
      </div>
      <div class="item-details">
         <p><a href="">Read More</a></p>
      </div>
   </div>
</div>


<div class="item">
   <div class="item-image">
      <a href="">
         <img class="img-fluid" src=""> 
         <div class="item-badges"></div>
         <div class="item-meta">
            <div class="item-price">
               <small></small>
            </div>
         </div>
      </a>
   </div>
   <div class="item-info">
      <h3 class="item-title"><a href=""></a></h3>
      <div class="item-location">
         <i class="fa fa-map-marker "></i>
         <p>Canada</p>
      </div>
      <div class="item-details-i"> 
         <span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span>
         <span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span>
         <span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span>
      </div>
      <div class="item-details">
         <p><a href="">Read More</a></p>
      </div>
   </div>
</div>

There are two 'item' divs, the difference is only 'item-location' div, containing p tag of location names. If user enters 'London', I want to show all 'item' divs which contain text 'london' and hide other 'item' divs. I tried the below code, but no luck. Any help would be appreciated. Thank you.

$("#location-filter").keyup(function() {
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(),
count = 0;
// Loop through the div
$('.item > .item-location p').each(function() {
// If the list item does not contain the text phrase fade it out
if ($("this").text().search(new RegExp(filter, "i")) < 0) {
$(this).hide();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
});

Answer 1

Your code had some mistakes. The > is used to select the direct child. .item has no .item-location element as direct child. That is why, each iterator wasn't running at all. Besides that, the this in the if condition is wrapped inside double quotes, making it a string. And the last mistake was that, in the each loop, this refers to the element being iterated. To hide or show the .item , you've to use closest to reach the ancestor .item

 $("#location-filter").keyup(function() { var filter = $(this).val(), count = 0; $('.item .item-location p').each(function() { if ($(this).text().search(new RegExp(filter, "i")) < 0) { $(this).closest('.item').hide(); } else { $(this).closest('.item').show(); count++; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="location-filter" type="text"> <div class="item"> <div class="item-image"> <a href=""> <img class="img-fluid" src=""> <div class="item-badges"></div> <div class="item-meta"> <div class="item-price"> <small></small> </div> </div> </a> </div> <div class="item-info"> <h3 class="item-title"> <a href=""></a> </h3> <div class="item-location"> <i class="fa fa-map-marker "></i> <p>London</p> </div> <div class="item-details-i"> <span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span> <span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span> <span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span> </div> <div class="item-details"> <p><a href="">Read More</a></p> </div> </div> </div> <div class="item"> <div class="item-image"> <a href=""> <img class="img-fluid" src=""> <div class="item-badges"></div> <div class="item-meta"> <div class="item-price"> <small></small> </div> </div> </a> </div> <div class="item-info"> <h3 class="item-title"> <a href=""></a> </h3> <div class="item-location"> <i class="fa fa-map-marker "></i> <p>Canada</p> </div> <div class="item-details-i"> <span class="bedrooms" title="Bedrooms">3 <i class="fa fa-bed"></i></span> <span class="bathrooms" title="Bathrooms">2 <i class="fa fa-bath"></i></span> <span class="bathrooms" title="Car Space">1 <i class="fa fa-car"></i></span> </div> <div class="item-details"> <p><a href="">Read More</a></p> </div> </div> </div>

Answer 2

I think the problem is with your CSS selector in the Jquery.

$('.item  .item-location p')

should be right. This is because with the arrow, it is looking for an element with "item-location" directly under an element with the class "item" which it is not able to find.