title: Javascript search bar
body: <p>I designed this really nice search box for a site that I'm building. However, I don't know how to get the search bar to work and actually display content. Below you can find the Html and CSS files for that particular section of my site:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.searchbox{
      /*defining width of form element*/
      width:350px;
      /*centering the form element*/
      margin-top: 200px;
      margin-left: 250px;
      margin-bottom: 370px;
  }
  
  input[type="search"]{
      padding:10px 15px 10px 50px;
      font-size:36px;
      color:#4D4D4D;
      /*removing border from search box*/
      border:none;
      /*defining background image as a search symbol*/
      background-image:url(img/search-btn.png);
      background-repeat:no-repeat;
      /*background-size*/
      -webkit-background-size:35px 35px;
      -moz-background-size:35px 35px;
      -o-background-size:35px 35px;
      background-size:35px 35px;
      /*positioning background image*/
      background-position:8px 12px;
      /*changing background color form white*/
      background-color:#C6E2FF;
  }
   
  /*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
  input[type="search"]::-webkit-input-placeholder{
      color:#0276FD;
  }
  input[type="search"]:-moz-placeholder { /* Firefox 18- */
      color: #0276FD;
  }
  input[type="search"]::-moz-placeholder { /* Firefox 19+ */
      color: #0276FD;
  }
  input[type="search"]:-ms-input-placeholder { /* interner explorer*/
      color: #0276FD;
  }
  
  form.searchbox a{
      display:block;
      /*removing underlines from anchor element*/
      text-decoration:none; 
      color:#1f5350;
      font-size:30px;
      background-color:#C6E2FF;
      padding:10px;
  }
  
  form.searchbox ul{
       width:465px;
      /*removing predefined bullet points from list*/
       list-style:none;
      /*removing padding from list items*/
      padding:0;
  }
  
  form.searchbox ul li{
      margin-bottom:10px;
  }
  
  /*adding effect when the mouse is hovered over list item*/
  .searchbox ul li a:hover{
      color:#395D33;
      background:#8CDD81;
  }
  
  /*moving it slightly toward right when hovered*/
  .searchbox ul li:hover{
      /*transform*/
      -webkit-transform:translateX(20px);
      -moz-transform:translateX(20px);
      -ms-transform:translateX(20px);
      -o-transform:translateX(20px);
      transform:translateX(20px);
  }
  
  /*now first we will hide the suggestion list*/
  .suggestions li{
      overflow:hidden;
      height:0;
      -webkit-transition:all 0.3s ease-in-out;
      -moz-transition:all 0.3s ease-in-out;
      -o-transition:all 0.3s ease-in-out;
      transition:all 0.3s ease-in-out;
  }
  
  /*and make the suggestion reappear when user focus on search field*/
  input[type="search"]:focus + .suggestions li{
      height:63px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="searcharea"&gt;
      &lt;div class="wrapper"&gt;
          &lt;form class="searchbox" action="Resources.html" target="_NEW"&gt;
              &lt;input type="search" placeholder="search.." /&gt;
              &lt;ul class="suggestions"&gt;
                  &lt;li&gt;&lt;a href="What is palliative  care.html"&gt;What is palliative ca...&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Who needs palliative care.html"&gt;Who needs palliative ca...&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Talking about palliative care.html"&gt;Talking about palliative ca...&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="How to interact with providers.html"&gt;how to interact with providers...&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Resources"&gt;Resourc...&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Please help. I don't want to use PHP for this as I am not familiar with creating a database or anything.</p>