title: Searchbox on a static page
body: <p>I have a page which contains FAQ.</p>
  
  <p>The idea is to implement a search box which has the look &amp; feel of the one shown on <a href="http://fontawesome.io/icons/" rel="nofollow noreferrer">Font awesome Icons</a></p>
  
  <p>With a bit of online help I've been able to produce the following code:</p>
  
  <pre><code>&lt;%@ Page Language="C#" %&gt;
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;script runat="server"&gt;
  &lt;/script&gt;
  
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Testing a search bar&lt;/title&gt;
  
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://use.fontawesome.com/e34d8d1dc9.js"&gt;&lt;/script&gt;
    &lt;script src="/Scripts/Searchbar.js"&gt;&lt;/script&gt;
    &lt;link href="/CSS/woff2.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="/CSS/site.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container" data-view="search"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-10 col-sm-9"&gt;
          &lt;section id="search"&gt;
            &lt;label for="searchinput"&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="sr-only"&gt;Search FAQ&lt;/span&gt;&lt;/label&gt;
            &lt;input id="searchinput" class="form-control input-lg" placeholder="Search FAQ" autocomplete="off" spellcheck="false" autocorrect="off" tabindex="1"&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="faqs"&gt;
        &lt;h3&gt;Question 1&lt;/h3&gt;
        &lt;section&gt;
          Answer 1&lt;br&gt; abc
        &lt;/section&gt;
        &lt;h3&gt;Question 2&lt;/h3&gt;
        &lt;section&gt;
          Answer 2&lt;br&gt;xyz
        &lt;/section&gt;
        &lt;h3&gt;Question 3&lt;/h3&gt;
        &lt;section&gt;
          Answer 3&lt;br&gt;def
        &lt;/section&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code uses 2 css - files:</p>
  
  <ol>
  <li><a href="https://dl.dropboxusercontent.com/u/54991757/Webdeveloper.com/Search%20on%20a%20static%20page/site.css" rel="nofollow noreferrer">site.css</a></li>
  <li><a href="https://dl.dropboxusercontent.com/u/54991757/Webdeveloper.com/Search%20on%20a%20static%20page/woff2.css" rel="nofollow noreferrer">enter link description here</a></li>
  </ol>
  
  <p>and 1 <a href="https://dl.dropboxusercontent.com/u/54991757/Webdeveloper.com/Search%20on%20a%20static%20page/search.js" rel="nofollow noreferrer">java script file</a>.</p>
  
  <p>Though the page (this is just a test of course) has the look &amp; feel I'm looking for, the search functionality doesn't work yet.</p>
  
  <p>I based it on <a href="https://jsfiddle.net/Sempervivum/rrkr5sL0/8/" rel="nofollow noreferrer">on a working example</a></p>
  
  <p>Can anyone here tell me what I have to do to make it work just like the example?</p>