Files
securedorg.github.io/community/search.html
2017-12-11 11:27:23 -08:00

61 lines
2.1 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Community Conference Search</title>
</head>
<body>
<div class="container" style="padding:50px 250px;">
<a href="https://securedorg.github.io/"><img src="https://securedorg.github.io/images/deathunicorn.png" width="100" height="100"></a>
<h1>Search Conferences</h1>
<h4>Name, Month, Location, or Country</h4>
<div id="header"></div>
<form role="form">
<div class="form-group">
<input type="input" class="form-control input-lg" id="txt-search" placeholder="Type your search character">
</div>
</form>
<div id="filter-records"></div>
<div id="footer"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://securedorg.github.io/community/list.json', function(data) {
$('#txt-search').keyup(function(){
var searchField = $(this).val();
if(searchField === '') {
$('#filter-records').html('');
return;
}
var regex = new RegExp(searchField, "i");
var output = '<div class="row">';
var count = 1;
$.each(data, function(key, val){
if ((val.name.search(regex) != -1) || (val.location.search(regex) != -1) || (val.country.search(regex) != -1) || (val.month.search(regex) != -1)) {
output += '<div class="col-md-6 well">';
output += '<div class="col-md-7">';
output += '<h5>' + val.name + '</h5>';
output += '<p>('+val.month+') ' + val.location + ', ' + val.country + '</p>'
output += '<p><a href="' + val.link + '">Website</a>'
output += '</div>';
output += '</div>';
if(count%2 == 0){
output += '</div><div class="row">'
}
count++;
}
});
output += '</div>';
$('#filter-records').html(output);
});
});
});
</script>