0

Firstly, i have almost zero expreience with html or js etc. Please think me as noob :) I have an offline website (basically images that goes to directions when i click on them), but since there are LOT of images right now, i want to add a search function.

This is my code --> https://jsfiddle.net/v3cjbyq7/

<html>
<head>
<style>
figure.image {
  display: inline-block;
  margin: 0px;
  padding-top: 20px;
  padding-bottom: 25px;
  padding-right: 24px;
  padding-left: 20px;
  width:225px;
  height:340px;
}
</style>
</head>
<body>
<div class="images">
<figure class="image">
    <img src="Assets/x.png" alt="x";>
</figure>
<figure class="image">
    <img src="Assets/xx.png" alt="xx";>
</figure>
<figure class="image">
    <img src="Assets/xy.png" alt="xy";>
</figure>
<figure class="image">
    <img src="Assets/xz.png" alt="xz";>
</figure>
</div>
<script src="random.js"></script>
</body>
</html>

(random.js is just a script that gives random order to images)

I found this topic that gives me almost what i want.

how to implement Search function using Javascript or jquery

This is the code --> http://jsfiddle.net/Mottie/ztaz6/2/

There are 2 problems that i need to solve in this example. First, i want to adapt this code to my site, but things i tried didn't change anything. (honestly, i just tried random things by hoping it will work)

Second, i want to hide the search box. I want to create something that looks like this --> https://youtu.be/aOkirKWrHbU?t=85 (sorry i couldn't find a better example) Like when he write "sni", it only highlights things with "sni" inside. Highlighting is perfect, but hiding it would be ok as well.

Nick is tired
  • 6,860
  • 20
  • 39
  • 51
Mugen
  • 11
  • 4
  • I assume you mean an expandable or collapsible search box? If so, you could easily incorporate the jquery (which does 'real-time search) in the fiddle you attached with the search box from https://bootsnipp.com/snippets/Pb5PX – Pieter Steyn Oct 03 '19 at 17:34
  • I don't want any kind of search box if possible. I just want to open my page, then start typing immediately to see results. Just like the video. About the website you send, i can't say i understand something :/ I am not sure how to use all those codes, which order etc. Sorry :( – Mugen Oct 03 '19 at 17:44

1 Answers1

0

okay if i understood your question well you need: -store your images in a key value structure like a hashmap you can create it by following this JavaScript hashmap equivalent basically something like imagelist[image1] will return image1. -put an empty div tag in your page and give it an id. -write a keyboard listener after the ready call and in it's callback(which is the function in the $(document).ready(function(){} thingy) write a function that would first inject the text being inputed by the user in the div tag we created earlier and secondly it would look in your image dictionary(the storage we made earlier) using a search by regex(google it) and return the desired image and you can do whatever you like with it afterwards.

Nick is tired
  • 6,860
  • 20
  • 39
  • 51
Sid Barrack
  • 1,235
  • 7
  • 17
  • Hey, thanks for the answer. Honestly, i am trying to create something myself for several days, but like i said i have almost zero experience and i couldn't make any progress at all. I am not gonna lie, i didn't understand very much from your answer as well. I asked here because i was expecting to see an example code that i can edit according to my images. Because right now i feel like i am trying to learn Chinese grammar without knowing any Chinese letters at all :/ The code would be too big/hard? I was hoping it is not too hard since search function is very common on websites. – Mugen Oct 03 '19 at 17:53
  • if you google most of what i told you you can do it your self you just have to dedicate time and the advantage of that over copy pasting some code is that you will be able to customize it and make it better as you learn and if you want some ready code that you'll try to adapt(really hard if you're a beginner) go on github and look for a similar open source project and fork it. – Sid Barrack Oct 03 '19 at 17:57