Input search on-page (hard to explain in title)

I'm starting a new project and I've got most things figured out or at least know have to go about it, but I'm curious about something I don't think I can figure out on my own ( haven't so far).

Essentially, I'm trying to make an input line with 2 inputs. (ie. "What's something that is white and blue .") And then below the input line, it would only display the <div>s or thumbnails that have the tags "white" and "blue".

So say that all thumbnails are automatically set to "display:none;" until the search and only the thumbnails matching both inputs are displayed.

Can anyone help?

 

Well, a bit iffy based on your description, but this would be a relatively simple javascript show/hide script - or an ajax-call, depending on how many thumbnails you have to start with. Ie, if it's a couple hundred, it might be just as well just loading everything on first load, and show / hide them based on what is selected. If there are thousands, then you might wanna do this by an ajax call and pull the content from a database.

That being said, how to do it will vary a little based on what you have to work with - I'm assuming that you have images with certain tags already present, and you want to show those with matching tags? If so, you can either make a list of all tags in a couple select-boxes, and have people chose the available tags - or you can have freeform text-input, but that might make it harder to actually find stuff, since people might not search for stuff that is tagged. (Someone looking for something blue and white might search for something like "blue and ivory" for instance, or similar - also, you will have to parse the input string. Hence, selects will probably work better).

Then it's just about fetching the value of the selected option, and show anything matching that tag. And so on. Not too hard to do, but again, it depends a bit on the amount of content you want to sort.

 

It's going to start with dozens of thumbnails, not 100s or 1000s so I don't think it would be needing a database just yet. What I'm planning to do is have the text-input, but a couple select-boxes was also an idea. It's going to be a pretty niche lil thing, so I don't think I have to worry about, say, them looking for "ivory" instead of "white", because they will actually be names of characters from a game they will be searching/inputting.

 

So bare basics with this, would it be something similar to this? Though atm it would only display 1 thing, so I would need to be able to set each variable to display multiple thumbnails and each option to show different ones..

But I threw this together real quick, based on what you said.

  <label for="showThumbs">Enter Character name: </label>
  <select name="showThumbs" id="showThumbs">
  <option value="Character 1">Character 1</option>
  <option value="Character 2">Character 2</option>
  <option value="Character 3">Character 3</option>
  <option value="Character 4">Character 4</option>
  <option value="Character 5">Character 5</option>
  <option value="Character 6">Character 6</option>
  </select>
  <div id="showThumbsValue">
  <div style="width:50px;height:50px;background:#000;" id="showThumbsValue"></div>
  </div>

Code (markup):

JS

$(document).ready(function()
  {
  $("#showThumbs").change(function()
  {
  if($(this).val() == "Character 2")
  {
  $("#showThumbsValue").show();
  }
  else
  {
  $("#showThumbsValue").hide();
  }
  });
  $("#showThumbsValue").hide();
});

Code (markup):

Demo here: http://jsfiddle.net/jyp97e5r/

 

Yes, something like that. However, like I said, you could load every character on first page load, and just hide them all until something is selected.

 

Any help? I'm not the best with JS and would appreciate a step in the right direction

 

Well, here's one take:
https://jsfiddle.net/n0o3fwyo/1/

However, this will only work with one selectbox, and a specific id on the list-item (the images/characters are a list, and should be put in one, not in divs).

If you want to do selection based on "tags", something like "blond, female" or similar, the whole code needs to be changed a bit, maybe something like this:
https://jsfiddle.net/gnghzoLL/3/

 

Thank you, the second one is almost exactly what I'm looking to do. I'll start with that and go from there. May have another question later but again, thank you.