I'm a bit lost on how to do this. So basically I have a page with a search bar and some cards with countries and addresses in it. And these cards are grouped according to continents
<div class="find-content">
<div class="left">
<h1> Asia </h1>
<div class="cards">
<p>Singapore</p>
<p>Some Address St. Singapore 12345 </p>
</div>
<div class="cards">
<p>Malaysia</p>
<p>Some Address St. Malaysia 12345 </p>
</div>
<div class="cards">
<p>Thailand</p>
<p>Some Address St. Thailand 12345 </p>
</div>
</div>
<div class="left">
<h1> Europe </h1>
<div class="cards">
<p>United Kingdom</p>
<p>Some Address St. UK 12345 </p>
</div>
<div class="cards">
<p>Sweden</p>
<p>Some Address St. Sweden 12345 </p>
</div>
<div class="cards">
<p>Czech Republic</p>
<p>Some Address St. Czech Republic 12345 </p>
</div>
</div>
<div class="left">
<h1> Pacific </h1>
<div class="cards">
<p>Australia</p>
<p>Some Address St. Melbourne Australia 12345 </p>
</div>
<div class="cards">
<p>New Zealand</p>
<p>Some Address St. New Zealand 12345 </p>
</div>
</div>
</div>
Here is the search bar
<form action="#">
<fieldset>
<input type="text" class="search" name="search" value="" id="id_search-2" placeholder="Search for your city" autofocus />
</fieldset>
</form>
$( document ).ready(function() {
$('input#id_search-2').quicksearch('.find-content .left .cards', {
'noResults': '#available2'
});
});
.. and so far, it searches through everything except that the other headers are still there when I do the searching. Like when I search for Singapore, the Singapore card appears but the header "Europe", and "Pacific" is still there. How can I make them disappear and only allow the header "Asia" to be there?
Thanks!
(the #available2 is called whenever there's no result, that works fine)