Hello everyone,
I have a table with a search function, which works wonderfully.. However, I need the results to be hidden unless the query is entered (currently, they are shown by default). I've managed to have the results hidden by default, but once any character is typed in the search box, and taken away, all results are shown. Optimally, results will start showing once at least 4 characters are typed. I'm sure this can be done easily with javascript, probably just an extension of my current script.. but I need a little more experience with JS.. right now I just copy and edit snippets I find around.. Thanks!


HTML Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
       
        
        
		<style type="text/css">
			body{
				margin:0 auto;
				font-family:verdana,arial;
				font-size:13px;
				width:800px;}			
			th{
				padding:3px;
				text-align:center;
				border:solid 1px;
				color:#eee;
				background-color:#333;
				font-size:12px;}			
			a{
				color:#12a9f9;
				text-decoration:none;}
			td{
				border:solid 1px}
			
			.row{
				display:none}	
			
		</style>        
        
	</head>
	<body bgcolor="#d4d4d4">
    
  	  
	<div class="tables">       
        	Enter your Ticket ID:<input type="text" id="search"> ex: 12345          
            <hr>
            
			<table width="800px" id="tblData" class="target" bgcolor="#d4d4d4" style="border-left:solid 2px #333; border-right:solid 2px #333">
				<tbody>                 
                <th width="60px">Ticket ID</th>
                <th colspan= width="">Images (click to view)</th>   
                
                 
<!----------------------------------------------------------------------------------------------->
<tr class="row">
<td>001</td>
<td>content</td>
</tr>
<tr class="row">
<td>002</td>
<td>content</td>
</tr>
<tr class="row">
<td>003</td>
<td>content</td>
</tr>
<tr class="row">
<td>004</td>
<td>content</td>
</tr>
<tr class="row">
<td>005</td>
<td>content</td>
</tr>


				</tbody>
			</table>

        </div>      

			
            
		
		        		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
						<script type="text/javascript">
			$(document).ready(function()
			{
				$('#search').keyup(function()
				{
					searchTable($(this).val());
				});
			});
			function searchTable(inputVal)
			{
				var table = $('#tblData');
				table.find('tr').each(function(index, row)
				{
					var allCells = $(row).find('td');
					if(allCells.length > 0)
					{
						var found = false;
						allCells.each(function(index, td)
						{
							var regExp = new RegExp(inputVal, 'i');
							if(regExp.test($(td).text()))
							{
								found = true;
								return false;
							}
						});
						if(found == true)$(row).show();else $(row).hide();
					}
				});
			}
		</script>	
</body>

</html>