I have a filter inside a JSON file that when typing it is filtering and leaving only what you are going to write, problem is that if I was erasing what is in the search field it does not continue filtering and returns to normal when I delete everything. The other point is that I wanted to know if it is possible to 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><inputid="filtro" type="text" placeholder="Busca Rápida"></header>
<main id="dados" ></main>
<footer></footer>