title: How to create a search bar that drops down a list of items from a SQL database
body: <p>How to create a search bar like on youtube or many other sites that searches a database and only displays a few results overlaying the rest of the site.</p>
  
  <p>I have already searched google and youtube for tutorials and some help with searching a database, and others with how to create a search bar. But for some reason, I cannot find one that helps me figure out how to display the items in a drop-down that overlays the rest of the page and doesn't displace the content. I have also tried you the CSS display: none; but as soon as that is set to display: block; with javascript, for example, the content is displaced. Thank you in advance.</p>
  
  <p>I have tried to use this javascript for the table:</p>
  
  <pre><code>function search() {
  var input, filter, found, table, tr, td, i, j;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  table.style.display = "block";
  tr = table.getElementsByTagName("tr");
  for (i = 0; i &lt; tr.length; i++) {
      td = tr[i].getElementsByTagName("td");
      for (j = 0; j &lt; td.length; j++) {
          if (td[j].innerHTML.toUpperCase().indexOf(filter) &gt; -1) {
              found = true;
          }
      }
      if (found) {
          tr[i].style.display = "";
          found = false;
      } else if (!tr[i].id.match('^tableHeader')) {
          tr[i].style.display = "none";
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>and my HTML is as follows:</p>
  
  <pre><code>        &lt;table id="myTable"&gt;
              &lt;tr&gt;
                  {% for key, value in list.items() %}
                  &lt;td&gt;{{ key|e }&lt;/td&gt;
                  &lt;td id="name"&gt;{{ value|e }}&lt;/td&gt;
                  &lt;td&gt;
                      &lt;form class="form-signin ajax" action="/signIn" method="post" data-replace="#res" role="form"&gt;
                          &lt;input type="checkbox" name="watchlist" value="Watchlist" onclick="writeToCell (this.id)" id="{{ key|e }}"&gt;
                      &lt;/form&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              {% endfor %}
          &lt;/table&gt;
  </code></pre>
  
  <p>I am using Flask framework and python as well. </p>
  
  <p>Using <code>display: none;</code> in CSS when loaded you cannot see the table and the h2 tag is placed right below it.</p>
  
  <p><a href="https://i.stack.imgur.com/H3dvU.png" rel="nofollow noreferrer">intial</a></p>
  
  <p>But when you start typing in the table displaces the h2 tag and remains on the screen even when not selected on the search bar. </p>
  
  <p><a href="https://i.stack.imgur.com/GLGAn.png" rel="nofollow noreferrer">after search</a></p>
  
  <p>I would like to have it so the results (from a SQL database) only pop up when something is searched and do not displace other elements. Thank you.</p>