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.

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.

I have tried to use this javascript for the table:

```
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 < tr.length; i++) {
    td = tr[i].getElementsByTagName("td");
    for (j = 0; j < td.length; j++) {
        if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
            found = true;
        }
    }
    if (found) {
        tr[i].style.display = "";
        found = false;
    } else if (!tr[i].id.match('^tableHeader')) {
        tr[i].style.display = "none";
    }
}

```

}

and my HTML is as follows:

```
        <table id="myTable">
            <tr>
                {% for key, value in list.items() %}
                <td>{{ key|e }</td>
                <td id="name">{{ value|e }}</td>
                <td>
                    <form class="form-signin ajax" action="/signIn" method="post" data-replace="#res" role="form">
                        <input type="checkbox" name="watchlist" value="Watchlist" onclick="writeToCell (this.id)" id="{{ key|e }}">
                    </form>
                </td>
            </tr>
            {% endfor %}
        </table>

```

I am using Flask framework and python as well. 

Using `display: none;` in CSS when loaded you cannot see the table and the h2 tag is placed right below it.

[intial](https://i.stack.imgur.com/H3dvU.png)

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. 

[after search](https://i.stack.imgur.com/GLGAn.png)

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.