javascripts ajuda search box

[Carlosp]

Olá tenho aqui uma duvida que não estou a conseguir seguir em frente por isso.

tenho um caixa de search que faz uma procura dentro de uma tabela e mostra os resultados consoante escrevo a procura, até aqui tudo bem a única coisa que me falta, que eu queria implementar era que as tabelas só aparecessem ao iniciar a pesquisa como ele faz, não no load da pagina.

O javascripts faz a fitra tudo bem mas fica todas as tabelas visíveis quando entro no html.

consegui esconder a tabela com comandos HTML mas a procura depois fica insegura tanto mostra as tabelas como não.

Deixo aqui o HTML e o js se alguém me conseguir ajudar agradeço imenso. sou novo em .js Obrigado

html codigo

<section class="container">


	<input type="search" class="table-filter" data-table="order-table" placeholder="Filter" >

	<table class="order-table table">

		<tbody>
			<tr>
				<td>John</td>
				<td>john.doe</td>
			</tr>
			<tr>
				<td>Jane Vanda</td>
				<td>jane@vanda</td>
			</tr>
			<tr>
				<td>Alferd Penyworth</td>
				<td>alfred</td>
			</tr>
		</tbody>
	</table>

</section>

javascripts codigo

(function(document) {
	'use strict';

	var TableFilter = (function(Arr) {

		var _input;

		function _onInputEvent(e) {
			_input = e.target;
			var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
			Arr.forEach.call(tables, function(table) {
				Arr.forEach.call(table.tBodies, function(tbody) {
					Arr.forEach.call(tbody.rows, _filter);
				});
			});
		}

		function _filter(row) {
			var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
			row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
		}

		return {
			init: function() {
				var inputs = document.getElementsByClassName('table-filter');
				Arr.forEach.call(inputs, function(input) {
					input.oninput = _onInputEvent;
				});
			}
		};
	})(Array.prototype);

	document.addEventListener('readystatechange', function() {
		if (document.readyState === 'complete') {
			TableFilter.init();
		}
	});

})(document);