let images = document.getElementsByClassName('thumb-image'); $('#search_templates').keyup(function (e) { let search = $('#search_templates').val().toLowerCase(); for (let i = 0; i < images.length; i++) { let searchVal = images[i].getAttribute('data-search'); if (searchVal.toLowerCase().indexOf(search) > -1) { images[i].style.display = ""; }else{ images[i].style.display = "none"; } } }); //#search_templates is input and each image has keywords in data-search="" attribute
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter