JSFiddle - React, Tailwind, and code Playground
by adishardis
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 () {
var data = $(this).data();
$(this).hide();
for (var key in data) {
if (data[key].search(new RegExp(filter, "i"))>=0) {
$(this).show();
break;
}
}
});
});