I have an input field and a bunch of containers that contain multiple data attributes, how do I dynamically show/hide the containers based on the value of the input? For example, if the value of the search input is "frontend" it should only display containers that have data-role: frontend, the same goes for the rest.
<input type="search">
<div class="container" data-role="Fullstack" data-level="Midweight" data-languages="JavaScript Rub" data-tools="Sass">
<div></div>
</div>
<div class="container" data-role="Backend" data-level="Junior" data-languages="Ruby" data-tools="RoR">
<div></div>
</div>
I'd like it to be in jQuery.
First make all of them hidden, for instance with visibility property of css then on input's blur/change call a function like this
$('div[id^=proto_]').filter('div[data-role=frontend]').css('visibility','visible');Also you need to add an id to all of the elements the get them. in my example I added some id's starting with proto_.