JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" placeholder="Search" />
<br />
<a href="#" data-department="Admin" data-event-name="Dia De Los Meurtos" data-requester="Andrew" data-submit-date="January 10, 2013" data-submit-time="9:32AM">Dia De Los Meurtos</a>
<a href="#" data-department="Marketing" data-event-name="Social Media Posters" data-requester="John" data-submit-date="January 15, 2013" data-submit-time="10:22AM">Social Media Posters</a>
<a href="#" data-department="Women's Resource Center" data-event-name="Self Defense" data-requester="Andrea" data-submit-date="January 23, 2013" data-submit-time="11:42AM">Self Defense</a>
<a href="#" data-department="Women's Resource Center" data-event-name="Let's Talk About" data-requester="Andrea" data-submit-date="January 23, 2013" data-submit-time="11:42AM">Let's Talk About</a>
CSS
body {
background:#E2E2E2;
}
a {
width:200px;
display:block;
background: #8D8D8D;
padding:10px;
color:white;
text-decoration:none;
font: bold 14px helvetica;
margin-bottom:2px;
}
input[type=text] {
padding:10px;
display:block;
width:220px;
border:0;
box-shadow:0px 1px 2px #8D8D8D;
outline:0;
}
JavaScript
$("input[type=text]").keyup(function () {
var filter = $(this).val();
$("a").each(function () {
if ($(this).attr("data-event-name").search(new RegExp(filter, "i")) < 0) {
$(this).hide();
} else {
$(this).show();
}
});
});