title: How to add hidden search function to my offline collection website
body: <p>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.</p>
  <p>This is my code --&gt; <a href="https://jsfiddle.net/v3cjbyq7/" rel="nofollow noreferrer">https://jsfiddle.net/v3cjbyq7/</a></p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  figure.image {
    display: inline-block;
    margin: 0px;
    padding-top: 20px;
    padding-bottom: 25px;
    padding-right: 24px;
    padding-left: 20px;
    width:225px;
    height:340px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class=&quot;images&quot;&gt;
  &lt;figure class=&quot;image&quot;&gt;
      &lt;img src=&quot;Assets/x.png&quot; alt=&quot;x&quot;;&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;image&quot;&gt;
      &lt;img src=&quot;Assets/xx.png&quot; alt=&quot;xx&quot;;&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;image&quot;&gt;
      &lt;img src=&quot;Assets/xy.png&quot; alt=&quot;xy&quot;;&gt;
  &lt;/figure&gt;
  &lt;figure class=&quot;image&quot;&gt;
      &lt;img src=&quot;Assets/xz.png&quot; alt=&quot;xz&quot;;&gt;
  &lt;/figure&gt;
  &lt;/div&gt;
  &lt;script src=&quot;random.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>(random.js is just a script that gives random order to images)</p>
  <p>I found this topic that gives me almost what i want.</p>
  <p><a href="https://stackoverflow.com/questions/14031369/how-to-implement-search-function-using-javascript-or-jquery">how to implement Search function using Javascript or jquery</a></p>
  <p>This is the code --&gt; <a href="http://jsfiddle.net/Mottie/ztaz6/2/" rel="nofollow noreferrer">http://jsfiddle.net/Mottie/ztaz6/2/</a></p>
  <p>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)</p>
  <p>Second, i want to hide the search box. I want to create something that looks like this --&gt; <a href="https://youtu.be/aOkirKWrHbU?t=85" rel="nofollow noreferrer">https://youtu.be/aOkirKWrHbU?t=85</a>  (sorry i couldn't find a better example) Like when he write &quot;sni&quot;, it only highlights things with &quot;sni&quot; inside. Highlighting is perfect, but hiding it would be ok as well.</p>