Filter content by Category with select + Bug in Javascript filter

Question

I have a filter inside a JSON file that when typing it goes filtering and leaving only what you write, problem is that if I was deleting what is in the search field it does not continue filtering and back to normal when I delete everything. The other point is that I wanted to know if it can iterate in this code a filter by category with a select, I will leave the code below

FILTER CODE+JSON

window.onload=function(){
	data = { person: [ 
		{ 
		author: "Nobtaka Nukui",
		title: "Want people to use your product? Use it yourself",
		url: "http://www.medium.com",
		category: "Product Design",
		comments: "4 coments",
		created_at: "43 minutos atrás",
		classcor: "corUm",
		foto: '<img src="img/ft-3.jpg" width="18" height="18" alt="Personagem1">',
		upvotes: 11 },
	  {
		author: "Danil Ishutin",
		title: "wont Size Idea: px at Root, rem for Components, em for Text Elements",
		url: "http://www.css-tricks.com",
		category: "UX Theory",
		comments: "7 coments",
		created_at: "5 minutos atrás",
		classcor: "corDois",
		foto: '<img src="img/ft-2.jpg" width="18" height="18" alt="Personagem2">',
		upvotes: 9},
		{
		author: "Kenny Schrub",
		title: "Some things cant be prototyped",
		url: "http://www.mika.el",
		category: "Opinion",
		comments:'25 coments',
		created_at: '7 minutos atrás',
		classcor: 'corTres',
		foto: '<img src="img/ft-2.jpg" width="18" height="18" alt="Personagem2">',
		isOwner: true,
		upvotes: 4	
			},
		{
		author: "Jacky Mao",
		title: "How to prototype without any tools",
		url: "http://www.jackymao.wix",
		category: "Opinion",
		comments: '0 coments',
		classcor: 'corTres',
		foto: '<img src="img/ft-1.jpg" width="18" height="18" alt="Personagem2">',
		upvotes: 4
			},
			
		{
		author: "Christopher Alesund",
		title: "Case study: Redesigning the Folyo landing page",
		url: "http://www.medium.com",
		category: "Case Study",
		comments: '0 coments',
		classcor: 'corQuatro',
		foto: '<img src="img/ft-1.jpg" width="18" height="18" alt="Personagem2">',
		created_at: '7 hours ago',
		upvotes: 3
	  },
	  {
		author: "Pasha Biceps",
		title: "Don't let bad process or structure kill great interfaces",
		url: "http://www.medium.com",
		category: 'Product Design',
		comments: '0 coments',
		classcor: 'corUm',
		foto: '<img src="img/ft-3.jpg" width="18" height="18" alt="Personagem2">',
		created_at: '2 days ago',
		isOwner: true,
		upvotes: 2
	  }
		
		]};
		
data.person.forEach(function(p){ 
  
  var post = "<section><span><a href='#'></a>"+p.upvotes+"</span><div><a href="+p.url+">"+p.url+"</a><h1>"+p.title+"</h1><nav><a  href='#' id='bt-category' class="+ p.classcor +" title="+ p.category +">"+p.category+"</a><p>"+p.foto+"<a href='#' title="+p.author+">"+p.author+"</a>"+p.created_at+"<a  href='#' class='coments'>"+p.comments+"</a></p></nav></div></section>";
		  
  document.querySelector('#dados').innerHTML += post;
  
  
  });
  
 $('#filtro').keyup(function () {
		var yourtext = $(this).val();
		if (yourtext.length > 0) {
			var abc = $("section").filter(function () {
				var str = $(this).text();
				var re = new RegExp(yourtext, "i");
				var result = re.test(str);
				if (!result) {
					return $(this);
				}
			}).hide();
		} else {
			$("section").show();
		}
	});

}

*{ margin:0; padding:0; border:0; }
html, body {
  overflow-x: hidden;
}
body { width:100%; display:flex; flex-direction:column; height:100vh; align-items:center;}
:focus{ outline: none; } 
UL{ list-style:none; }
A{ text-decoration:none; overflow:hidden; }

/*** HEADER ***/

HEADER{ width:100%; position:relative; flex-shrink:0; flex-direction:column; padding:26px 0 30px 0; border-bottom:1px solid #f0f0f0; margin-bottom:60px; }

/*** CONTEÚDO ***/

main{ width:900px; display:flex; align-self:center; flex-direction:column;  flex:1 0 auto; }
main SECTION{ width:100%; display:flex; margin-bottom:48px; }
main SECTION SPAN{ width:46px; height:77px; display:flex; flex-direction:column; background:url(img/bg-upvote.jpg) no-repeat 0 0; text-align: center;font: normal bold 25px/25px arial; margin-right:21px; }
main SECTION SPAN A{ width:46px; height:32px; float:left; color:#363636; margin-bottom:12px; }
main SECTION DIV A{ font: normal bold 15px/15px arial; color:#cbcbcb; }
main SECTION DIV A:HOVER{ text-decoration:underline; }
main SECTION DIV H1{ font:normal normal 23px/25px arial; color:#383535; padding:5px 0; }
main SECTION DIV NAV{ display:flex; }
main SECTION DIV NAV #bt-category{ height:24px; display:flex; font: normal normal 15px/15px arial; color:#fff; justify-content: center;align-items: center;border-radius: 10px;padding: 0 10px;}
main SECTION DIV NAV #bt-category:HOVER{ text-decoration:none; }
main SECTION DIV NAV .corUm{ background-color:#00e2ad; }
main SECTION DIV NAV .corDois{ background-color:#00bbff; }
main SECTION DIV NAV .corTres{ background-color:#4271d6; }
main SECTION DIV NAV .corQuatro{ background-color:#f4973c; }
main SECTION DIV NAV P{ font: normal normal 15px/22px arial; color:#6e6c6c; border-left:1px solid #c7c7c7; margin-left:12px; padding-left:14px; }
main SECTION DIV NAV P A{ color:#e3472f; text-decoration:underline; margin-left:5px; margin:0 10px; }
main SECTION DIV NAV P .coments{ background:url(img/balao.png) no-repeat 0 3px; padding-left:20px; }
main SECTION DIV NAV P IMG{ position:relative; top:5px; }

/*** RODAPÉ ***/

FOOTER{ width:900px; height:54px; display:flex; flex-shrink:0; alig-self:center; background-color:#0CC;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<header><input id="filtro" type="text" placeholder="Busca Rápida"></header>
<main id="dados" ></main>
<footer></footer>