Skip to content

Instantly share code, notes, and snippets.

@redox
Created March 4, 2014 18:42
Show Gist options
  • Save redox/9352827 to your computer and use it in GitHub Desktop.
Save redox/9352827 to your computer and use it in GitHub Desktop.
Eventbrite demo
<form id="searchform" name="searchform" method="get" action="#" onsubmit="javascript:search()">
<input id="q" name="q" type="text" class="ui-autocomplete-input input-suggestion" maxlength="50" placeholder="Search for (e.g. music, networking)" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" autocorrect="off" spellcheck="false">
<div style="float: left;">
<a class="eb_button medium go js-search-click-action" id="search_button" href="javascript:search()">Search</a>
</div>
<div style="float: left; margin-left: 20px; margin-top: 10px;">
<input type="checkbox" name="around_me" id="around_me" />
<label for="around_me">Around me</label>
</div>
<div style="clear: both; text-align: right; padding-top: 10px; margin-right: 290px;">
<input type="radio" name="period" value="all" id="all" style="float: none; display: inline; margin: 0px;" checked="checked" />
<label for="all">All</label>
<input type="radio" name="period" value="today" id="today" style="float: none; display: inline; margin: 0px; margin-left: 20px;" />
<label for="today">Today</label>
<input type="radio" name="period" value="tomorrow" id="tomorrow" style="float: none; display: inline; margin: 0px; margin-left: 20px;" />
<label for="tomorrow">Next 2 days</label>
<input type="radio" name="period" value="this_week" id="this_week" style="float: none; display: inline; margin: 0px; margin-left: 20px;" />
<label for="this_week">This week</label>
<input type="radio" name="period" value="next_week" id="next_week" style="float: none; display: inline; margin: 0px; margin-left: 20px;" />
<label for="next_week">Next 2 weeks</label>
<input type="radio" name="period" value="custom" id="custom" style="float: none; display: inline; margin: 0px; margin-left: 20px;" />
<label for="custom">From</label>
<input type="text" name="custom_start" id="custom_start" value="2014/02/27" style="float: none; display: inline; margin: 0px; margin-left: 5px; width: 70px;" />
to
<input type="text" name="custom_end" id="custom_end" value="2014/03/27" style="float: none; display: inline; margin: 0px; margin-left: 5px; width: 70px;" />
</div>
</form>
<div class="search-events-main event_listing_organizer">
<div id="facets"></div>
<div id="hits"></div>
</div>
<script src="Eventbrite_files/strftime-min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://rawgithub.com/algolia/algoliasearch-client-js/master/dist/algoliasearch.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var algolia = new AlgoliaSearch('EBTM1YDM40', '1113dae74afc7b12f3d06259d7154d95');
window.helper = new AlgoliaSearchHelper(algolia, 'eventbrite', {
hitsPerPage: 10,
facets: [],
disjunctiveFacets: ['min_price', 'categories', 'venue.city']
});
var $hits = $('#hits');
var $facets = $('#facets');
var $q = $("#q");
var $around_me = $('#around_me');
var $all = $('#all');
var $today = $('#today');
var $tomorrow = $('#tomorrow');
var $this_week = $('#this_week');
var $next_week = $('#next_week');
var $custom = $('#custom');
var $footer = $('#footer');
var last_query = "";
var geoloc = {};
var now = new Date();
var now_utc = Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds()) / 1000;
var page = null;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
geoloc = {
aroundLatLng: position.coords.latitude + ',' + position.coords.longitude,
aroundPrecision: 5000, // 10km precision
aroundRadius: 80000 // max 80km around
}
});
}
function searchCallback(success, content) {
if (content.query != last_query) {
return;
}
var html = '';
if (content.page == 0) {
for (var facet in content.disjunctiveFacets) {
var values = [];
for (var value in content.disjunctiveFacets[facet]) {
values.push({ key: value, count: content.disjunctiveFacets[facet][value] });
}
values.sort(function(a,b) { return a.key.localeCompare(b.key); });
if (facet === 'min_price') {
var facets = content.disjunctiveFacets['min_price'];
html += '<h3>Price</h3><ul>' +
'<li><input type="checkbox" onclick="helper.toggleRefine(\'min_price\', \'Free\');" ' + (facets['Free'] ? (helper.isRefined('min_price', 'Free') ? 'checked="checked"' : '') : 'disabled="disabled"') + ' /> Free (' + (facets['Free'] || 0) + ')</li>' +
'<li><input type="checkbox" onclick="helper.toggleRefine(\'min_price\', \'$\');" ' + (facets['$'] ? (helper.isRefined('min_price', '$') ? 'checked="checked"' : '') : 'disabled="disabled"') + ' /> $ (' + (facets['$'] || 0) + ')</li>' +
'<li><input type="checkbox" onclick="helper.toggleRefine(\'min_price\', \'$$\');" ' + (facets['$$'] ? (helper.isRefined('min_price', '$$') ? 'checked="checked"' : '') : 'disabled="disabled"') + ' /> $$ (' + (facets['$$'] || 0) + ')</li>' +
'<li><input type="checkbox" onclick="helper.toggleRefine(\'min_price\', \'$$$\');" ' + (facets['$$$'] ? (helper.isRefined('min_price', '$$$') ? 'checked="checked"' : '') : 'disabled="disabled"') + ' /> $$$ (' + (facets['$$$'] || 0) + ')</li>' +
'</ul>';
} else {
html += '<h3>' + (facet == 'venue.city' ? 'City' : 'Category') + '</h3><ul>';
for (var i = 0; i < values.length; ++i) {
var v = values[i].key.charAt(0).toUpperCase() + values[i].key.slice(1);
var checked = helper.isRefined(facet, values[i].key) ? 'checked="checked"' : '';
html += '<li><input type="checkbox" onclick="helper.toggleRefine(\'' + facet + '\', \'' + values[i].key + '\');" ' + checked + ' /> ' + v + ' (' + values[i].count + ')</li>';
}
html += '</ul>';
}
}
$facets.html(html);
}
html = '';
if (content.page == 0) {
html = '<h6>Showing 1 - <span id="nbHits">' + content.hits.length + '</span> of ' + content.nbHits + ' in ' + content.processingTimeMS + ' ms</h6>' +
'<h1> Results for "' + $('<div />').text(last_query).html() + '"</h1><div class="clrfix"></div>';
} else {
$('#nbHits').text(parseInt($('#nbHits').text()) + content.hits.length);
}
for (var i = 0; i < content.hits.length; ++i) {
var hit = content.hits[i];
var where = [];
if (hit.venue) {
if (hit.venue.address) where.push(hit.venue.address);
if (hit._highlightResult.venue.city.value) where.push(hit._highlightResult.venue.city.value);
if (hit.venue.region) where.push(hit.venue.region);
if (hit._highlightResult.venue.country.value) where.push(hit._highlightResult.venue.country.value);
}
if (where.length > 0 && hit._rankingInfo && hit._rankingInfo.geoDistance) {
where.push('<b>(' + (hit._rankingInfo.geoDistance / 1000 * 0.621371).toFixed(2) + ' miles from you)</b>')
}
if (where.length === 0) {
where.push('N/A');
}
html += '<div class="hit event_listing_item clrfix">' +
'<div class="logo"><a href="' + hit.url + '"><img src="' + hit.logo + '" /></a></div>' +
'<div class="info">' +
'<h3><a href="' + hit.url + '">' + hit._highlightResult.title.value + '</a></h3>' +
'<dl>' +
'<dt class="icon icon_when">When:</dt>' +
'<dd>' + new Date(hit.start_date.replace(/-/g, "/")).strftime('%B %d, %Y at %I:%M %p') + '</dd>' +
'<dt class="icon icon_where">Where:</dt>' +
'<dd>' + where.join(', ') + '</dd>' +
'</dl>' +
(hit._highlightResult.venue && hit._highlightResult.venue.name.value ? '<div>Venue: ' + hit._highlightResult.venue.name.value + '</div>' : '') +
(hit._highlightResult.organizer && hit._highlightResult.organizer.name.value ? '<div>Organizer: ' + hit._highlightResult.organizer.name.value + '</div>' : '') +
'<div>Attendees: ' + (hit.num_attendee_rows || 0) + '</div>' +
(hit._highlightResult.tags && hit._highlightResult.tags.value ? '<div>Tags: ' + hit._highlightResult.tags.value + '</div>' : '') +
'</div>' +
'</div>';
}
if (content.page === 0) {
$hits.html(html);
} else {
$hits.append(html);
}
page = null;
}
window.search = function() {
last_query = $q.val();
var params = {
attributesToRetrieve: ['url', 'title', 'venue', 'logo', 'start_date', 'organizer', 'num_attendee_rows', 'tags'],
getRankingInfo: true,
maxValuesPerFacet: 20
};
var beginning_of_day = now_utc - now.getUTCHours() * 3600 - now.getUTCMinutes() * 60 - now.getUTCSeconds();
var end_of_day = beginning_of_day + 24*3600;
var day = now.getUTCDay();
if (day === 0) {
day = 7;
} else {
--day;
}
var beginning_of_week = beginning_of_day - day * 24*3600;
var end_of_week = beginning_of_week + 7*24*3600;
var dateConditions = null;
if ($today.is(':checked')) {
dateConditions = 'start_date_i>=' + beginning_of_day + ',start_date_i<=' + end_of_day;
} else if ($tomorrow.is(':checked')) {
var end_of_tomorrow = end_of_day + 24*3600;
dateConditions = 'start_date_i>' + end_of_day + ',start_date_i<=' + end_of_tomorrow;
} else if ($this_week.is(':checked')) {
dateConditions = 'start_date_i>=' + beginning_of_week + ',start_date_i<=' + end_of_week;
} else if ($next_week.is(':checked')) {
var end_of_next_week = end_of_week + 7*24*32600;
dateConditions = 'start_date_i>' + end_of_week + ',start_date_i<=' + end_of_next_week;
} else if ($custom.is(':checked')) {
var beginning = new Date($('#custom_start').val());
var end = new Date($('#custom_end').val());
dateConditions = 'start_date_i>' + (beginning.getTime() / 1000) + ',start_date_i<' + (end.getTime() / 1000 + 24*60*60);
}
if (dateConditions == null) {
dateConditions = 'start_date_i>' + now_utc;
}
params.numericFilters = dateConditions;
if ($around_me.is(':checked')) {
params = $.extend({}, params, geoloc);
}
helper.page = 0;
helper.search(last_query, searchCallback, params);
}
$all.change(function() { search() });
$today.change(function() { search() });
$tomorrow.change(function() { search() });
$this_week.change(function() { search() });
$next_week.change(function() { search() });
$custom.change(function() { search() });
$around_me.change(function() { search() });
$q.keyup(function() {
search();
}).focus();
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - $footer.height()) {
if (page == null) {
page = helper.page + 1;
helper.nextPage();
}
}
});
search();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment