JSFiddle - React, Tailwind, and code Playground

HTML

search: <input type="text" id="search" />
<ul id="imageCollection">
    <li>
        <img src="http://www.codingepiphany.com/sample_thumbs/flower.jpg" />
    </li>
    <li>
        <img src="http://www.codingepiphany.com/sample_thumbs/building_black_and_white.jpg" />
    </li>
    <li>
        <img src="http://www.codingepiphany.com/sample_thumbs/mushroom_edible.jpg" />
    </li>
    <li>
        <img src="http://www.codingepiphany.com/sample_thumbs/building_sculpture.jpg" />
    </li>
    <li>
        <img src="http://www.codingepiphany.com/sample_thumbs/flower_macro.jpg" />
    </li>
    <li>
        <img src="http://www.codingepiphany.com/sample_thumbs/volcano_clouds.jpg" />
    </li>
   
 </ul>

CSS

body {
    font-family: arial;
}

ul {
    list-style-type: none;
}

li {
    display: inline-block;
}

JavaScript

$('#search').keyup(function() {
    var filterValue = $(this).val();
    
    //make sure we start with showing all
    $('#imageCollection > li').each(function(index, item) {
        $(this).show();
    })
    
    //search the things that doesn't contains the search value
    var itemsToHide = $('#imageCollection').find('li').not(function(index) {
        var currentLiCode = $(this).html();       
        //return the result of the pattern matching of our word from the search bar. The gi means global, case insensitive search
        return currentLiCode.match(new RegExp(filterValue, "gi"));
    })
    
    //hide the non-matching items
    itemsToHide.each(function(index) {
        $(this).hide();
    })
})