How to populate an html table with javascript form elements?

Your HTML had some typos and other problems.
Your JavaScript was on the right track, but overly
complicated (and generally it is good practice to
put all of it in the head section of
the HTML). Here is a workable test-page:

You can use the following query:
$sql=mysql_query("SELECT Tipo FROM tfc_db.Category ");
$id=array();
while($row = mysql_fetch_assoc($sql)) {
$id[] = $row['Tipo'];
}
echo json_encode($id);
mysql_close($conn);
It will return the categories as an array of strings in JSON. e.g.
["entry 1","entry 2"]. If you decide to use this then you would need
to adjust your Javascript code.
Your javascript

Your problem is here:
if (i > list1.length)
{
list3[i] = list2[i];
}
You're correctly indexing list3, but you're acting as if the indexing
of list2 carried on from where list1 left off. It doesn't: it starts
from 0, just like all arrays.
Try
if (i > list1.length)
{
list3[i] = list2[i-list1.length];
}
and that should sort things out.

It seems to me that your question consists of two separate parts:
How do I filter the displayed items?
How do I hide all results until the first search is made?
As the second question seems uninteresting to me (many possible
solutions, no general problem), I'll focus on the first one. You might
want to read the documentation:
https://docs.angularjs.org/api/ng/filter/filter . Then it's pretty s