Creating a search bar in js?

Question

I'm a newbie into all this but I want to learn new things, and here's my problem. I want to create a search bar which would work like this:

When user types "Summer" into search bar, only tiles/cards that contains word Summer(there might be a case that couple of them will contain word summer if it matters) will pop up.

Also I'm curious if the script for this search bar have to be based on the words that are in the divs or if it's possible to add special value to the tile/card(like a class or smthg), because I'm not sure if I want to put any words in the tiles/cards(I'm planning to put photos inside them), but if it will be needed I will put words as well - hopefully you will understand what I mean.

I'm totally confused how to do it, I found some basic search bars but they were made on 'ul' attribute and my design is made on divs, I mean I don't need to use divs if there's easier way to do this search bar but I want to keep the design of these tiles/cards as it is. Hopefully my goal is clear, any help will be very much appreciated!

Not much of a code to show you here but website is asking for it.

Here's my code: https://jsfiddle.net/8td4gaym/

Answer 1

There are many ways to go about doing this, depending on how you're getting your data. Are you querying into a database that will give back objects containing the word "Summer"?

I assume you're only looking to search for text on the front end, so you could just use JQuery and find all divs that does not contain the word "Summer" and add style="display: none;" to them. This way, only the ones containing "Summer" would stay.