How can I filter elements with <a> links in Jquery when CSS Grids keeps them in place?

Question

So I have a basic jQuery filter that was filtering div nicely. However, once I added google map <a> links to each div it doesn't work anymore. When I filter the results stay in their grid instead of moving. So I am left with blank space between the grid elements instead of it only showing the filter results. A friend suggested I add the hidden class and that I need to change the search input to look for hidden elements but i'm confused Here is my code:

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".box").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

.wrapper {
  display: grid;
  grid-template-columns: 300px 300px 300px 300px;
  grid-template-rows: 300px 300px 300px 300px;
  grid-gap: 10px;
  background-color: white;
  color: #444;
  font-family: sans-serif;
}

.hidden {
  display: none;
}

a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">

  <input id="myInput" type="text" width="100%" placeholder="Search by 
    resort/hashtag"> </div>

<a class="hidden" href="https://www.google.com/maps/place/Avoriaz" target="_blank">
  <div id="avoriaz" class="box"> Avoriaz 1800m
    <br/>
    <p> #quiet #car-free #cheap #pool #france </p> <br/>
    <div class="green">
      31 </div>
    <div class="blue"> 122 </div>
    <div class="red"> 100 </div>
    <div class="black"> 32 </div>
  </div>
</a>
<a class="hidden" 
href="https://www.google.com/maps/place/Belle+Plagne" target="_blank"> <div 
id="belleplagne" class="box"> Belle Plagne 2500m <br/> <p> #quiet #cheap 
#car-free #pool #france </p> <br/>  <div class="green"> 12 </div> <div 
class="blue"> 128 </div> <div class="red"> 79 </div> <div class="black"> 37 
</div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Chamonix-Mont-
Blanc" target="_blank"> <div id="chamonix" class="box"> Chamonix 1035m <br/> 
<p> #party #luxury <!-- #sub2hrTransfer --> #pool #michelin-star #france 
</p> <div class="green"> 6 </div> <div class="blue"> 30 </div> <div 
class="red"> 31 </div> <div class="black"> 10 </div> </div> </a> 

<a class="hidden"
href="https://www.google.com/maps/place/Jackson+Hole" target="_blank"> <div 
id="jacksonhole" class="box"> Jackson Hole 1900m <br/> <p> #party #luxury 
#usa </p> <br/>  <div class="green"> 12 </div> <div class="blue"> 46</div> 
<div class="black"> 58 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Keystone,+CO+80435,+USA/@39.5965435,-114.8968694,5z/data=!4m5!3m4!1s0x876a5724e77c6583:0x43670c887d2ffa61!8m2!3d39.5791675!4d-105.9347384" target="_blank"> <div id="keystone" class="box"> Keystone 2800m <br/> <p> #quiet #usa </p> <br/> <div class="green"> 15 </div> <div class="blue"> 36 </div> <div class="black"> 64 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Klosters+Parsenn/@46.8425697,7.7038304,7z/data=!4m13!1m7!3m6!1s0x4783580b64d6dee7:0x69ddf6d69d9d3cc3!2sKlosters-Serneus,+Switzerland!3b1!8m2!3d46.8699029!4d9.8828697!3m4!1s0x4784a882f146d7e9:0x78816e8ea23fc6cb!8m2!3d46.849215!4d9.8240089" target="_blank"> <div id="klosters" class="box"> Klosters 1200m <br/> <p> #party #luxury #swiss </p> <br/> <div class="blue"> 24 </div> <div class="red"> 40 </div> <div class="black"> 12 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Tourist+Office+of+Les+2+Alpes/@44.9625404,3.9788973,7z/data=!4m13!1m7!3m6!1s0x478a12bf79d10603:0x53220c91ec9171ca!2sLes+Deux+Alpes,+38860+V%C3%A9nosc,+France!3b1!8m2!3d45.0054067!4d6.1235968!3m4!1s0x478a12c27920a0af:0x6b4c6fed54b647f0!8m2!3d45.0101178!4d6.1254975" target="_blank"> <div id="lesdeuxalpes" class="box"> Les Deux Alpes 1650m <br/> <p> #cheap #party #michelin-star #pool #france </p><br/> <div class="green"> 64 </div> <div class="blue"> 94 </div> <div class="red"> 75 </div> <div class="black"> 31 </div> </div> </    a> 


<a class="hidden" 
href="https://www.google.com/maps/place/Les+Menuires,+73440+Saint-Martin-de-
Belleville,+France/" target="_blank"> <div id="lesmenuires" class="box"> Les 
Menuires 1850m<br/> <p> #quiet #cheap #pool #france</p> <br/> <div 
class="green"> 53</div> <div class="blue"> 140 </div> <div class="red"> 112 
</div> <div class="black">34  </div> </div> </a> 

<a class="hidden" 
  
  
  
<a class="hidden" href="https://www.google.com/maps/place/Telluride+Ski+Resort/@37.9208208,-116.7986319,5z/data=!4m13!1m7!3m6!1s0x873ed87b70e6f473:0x38ee772171bae3e1!2sTelluride,+CO+81435,+USA!3b1!8m2!3d37.9374939!4d-107.8122852!3m4!1s0x873ed7fd24b94b9f:0x9d02e608ccfc306b!8m2!3d37.9129068!4d-107.8381813" target="_blank"> <div id="telluride" class="box"> Telluride 2670m <br/> <p> #luxury #quiet #usa </p> <div class="green"> 29 </div>  <div class="blue"> 46 </div> <div class="black"> 52 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Tignes+Val+d'Is%C3%A8re/@45.4689497,4.665585,7z/data=!4m5!3m4!1s0x478974b6e64a1b11:0x9b3c65ed86a37ce1!8m2!3d45.4689497!4d6.9067958" target="_blank"> <div id="tignes" class="box"> Tignes 1800m <br/> <p> #cheap #car-free #pool #france</p> <br/> <div class="green">20 </div> <div class="blue"> 68 </div> <div class="red"> 40 </div> <div class="black"> 26 </div> </div> </a>

<a class="hidden" href="https://www.google.com/maps/place/Vail+Ski+Resort/@39.6334399,-115.3251057,5z/data=!4m13!1m7!3m6!1s0x876a7005515dcf07:0xc9ccc01f7e9aa3c4!2sVail,+CO+81657,+USA!3b1!8m2!3d39.6402638!4d-106.3741955!3m4!1s0x876a7060c630dbdb:0xa7c2cf2d4b45ada2!8m2!3d39.6061511!4d-106.3549519" target="_blank"> <div id="vail" class="box"> Vail 2470m <br/> <p> #party #luxury #usa </p> <br/> <div class="green"> 35 </div> <div class="blue">  56 </div>  <div class="black"> 102 </div> </div> </a> 

	<a class="hidden" href="https://www.google.com/maps/place/Tourist+Office+Val+d'Isere/@45.4485984,4.7408155,7z/data=!4m13!1m7!3m6!1s0x47890909fd5ffb93:0x408ab2ae4baa830!2s73150+Val-d'Is%C3%A8re,+France!3b1!8m2!3d45.448034!4d6.980226!3m4!1s0x47890be8d2918a3f:0xdbf52a5cc1090823!8m2!3d45.449121!4d6.9800963" target="_blank"> <div id="valdisere" class="box"> Val D'Isere 1850m <br/> <p> #party #luxury #pool #france </p> <br/>  <div class="green"> 20 </div> <div class="blue">  68 </div> <div class="red"> 40 </div> <div class="black"> 26 </div> </div> </a>

	<a class="hidden" href="https://www.google.com/maps/place/Val+Thorens/@45.2979478,4.3408875,7z/data=!4m5!3m4!1s0x4789866002267071:0x8ec7bc6dc1eef333!8m2!3d45.2979478!4d6.5820983" target="_blank"> <div id="valthorens" class="box"> Val Thorens 2300m <br/> <p> #party #luxury #pool #france </p> <br/> <div class="green"> 53 </div> <div class="blue"> 140 </div> <div class="red"> 112 </div> <div class="black"> 34 </div> </div> </a> 

<a class="hidden" href="https://www.google.com/maps/place/Whistler+ski+resort+BC/@50.1130232,-127.4368298,6z/data=!4m5!3m4!1s0x5487232a9da252a7:0xf87ac63ef242f54!8m2!3d50.1130232!4d-122.9544082" target="_blank"> <div id="whistler" class="box"> Whistler 670m <br/> <p> #party #luxury #pool #canada </p> <br/> <div class="green"> 35 </div>  <div class="blue"> 110 </div> <div class="black"> 35 </div>  <div class="diamond"<div class="black"> 10 </div></div> </a>

	<a class="hidden" href="https://www.google.com/maps/place/Zermatt/@46.0225132,5.5052743,7z/data=!4m13!1m7!3m6!1s0x478f35a2292ee5cd:0x400ff8840196f70!2s3920+Zermatt,+Switzerland!3b1!8m2!3d46.0207133!4d7.749117!3m4!1s0x478f3675de88e779:0xcc169fa9e5323505!8m2!3d46.0244723!4d7.7482957" target="_blank">  <div id="zermatt" class="box"> Zermatt 1620m <br/> <p> #party #luxury #car-free #swiss </p> <br/>  <div class="blue"> 140 </div> <div class="red"> 112 </div> <div class="black"> 34 </div> </div> </a>

</div>

Can you add the html which contains the grid? Because we can't see it here. Also, filter is meant to filter items from a collection. If you want to do something foreach item in a collection use each.. — Mosh Feu
– Mosh Feu, Commented Jan 21, 2018 at 12:12

charlietfl · Accepted Answer · 2018-01-21 13:23:28Z

0

You are using wrong selector. The hidden parent of box has display:none and is what you need to toggle

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $(".hidden").each(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

.wrapper {
  display: grid;
  grid-template-columns: 300px 300px 300px 300px;
  grid-template-rows: 300px 300px 300px 300px;
  grid-gap: 10px;
  background-color: white;
  color: #444;
  font-family: sans-serif;
}

.hidden {
  display: none;
}

a {
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">

  <input id="myInput" type="text" width="100%" placeholder="Search by 
    resort/hashtag"> </div>

<a class="hidden" href="https://www.google.com/maps/place/Avoriaz" target="_blank">
  <div id="avoriaz" class="box"> Avoriaz 1800m
    <br/>
    <p> #quiet #car-free #cheap #pool #france </p> <br/>
    <div class="green">
      31 </div>
    <div class="blue"> 122 </div>
    <div class="red"> 100 </div>
    <div class="black"> 32 </div>
  </div>
</a>

answered Jan 21, 2018 at 13:23

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pete Mac Over a year ago

thanks a lot ! That's it almost working now. (I upvoted your answer but I'm new). The problem now is that all the images are hidden by default now. So before the user searches the page is blank.

Collectives™ on Stack Overflow

How can I filter elements with <a> links in Jquery when CSS Grids keeps them in place?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related