Eventbrite demo

eventbrite.html

<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>