Leanstack demo

leanstack.html

<input class='search-query search-query-small' id='searchbox' type='text'>
<div class="suggestions">
  <div class="cats"></div>
  <div class="stacks"></div>
  <div class="services"></div>
  <div class="powered-by-algolia"></div>
</div>

<script src="https://d3ibatyzauff7b.cloudfront.net/assets/algolia/algoliasearch.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
      var algolia = new AlgoliaSearch('EBTM1YDM40', '1113dae74afc7b12f3d06259d7154d95');
      var last_query = "";

      function searchCallback(success, content) {
        if (content.results.length != 3 || content.results[0].query != last_query) {
            return;
        }
        var cats = content.results[0];
        // Compute Categories popup
        var html = '';
        console.log(cats.hits.length);
        for (var i = 0; i < cats.hits.length; ++i) {
          var hit = cats.hits[i];
          if (html.length == 0) {
              html += '<div class="category-title">Categories</div>';
          }
          html += '<a href="' + hit.url + '" class="category">' + hit._highlightResult.category.value + '</a>';
        }
        $('.cats').html(html);
        var stacks = content.results[1];
        html = '';
        for (var i = 0; i < stacks.hits.length; ++i) {
          var hit = stacks.hits[i];
          if (html.length == 0) {
              html += '<div class="category-title">Cloud Stacks</div>';
          }
          html += '<a href="' + hit.url + '" class="stack">' + hit._highlightResult.name.value + '</a>';
        }
        $('.stacks').html(html);

        var services = content.results[2];
        html = '';
        for (var i = 0; i < services.hits.length; ++i) {
          var hit = services.hits[i];
          if (html.length == 0) {
              html += '<div class="category-title">Services</div>';
          }
          html += '<a href="' + hit.url + '" class="service">' + hit._highlightResult.service_name.value;
          html +=  '<small class="service-category">Category: <span>' + hit._highlightResult.category.value + '</span></small> ';
          html += '</a>';
        }
        $('.services').html(html);
        html = '';
        if (cats.hits.length > 0 || stacks.hits.length > 0 || services.hits.length > 0) {
          html = 'Powered by <a href="http://www.algolia.com" target="_blank"><img src="http://www.algolia.com/assets/algolia128x40.png" /></a>';
        }
        $('.powered-by-algolia').html(html);
      }

      function search() {
          last_query = $("#searchbox").val();
          if (last_query.length == 0) {
              $('.cats').empty();
              $('.stacks').empty();
              $('.services').empty();
              $('.powered-by-algolia').empty();
              return;
          }
          algolia.startQueriesBatch();
          algolia.addQueryInBatch("leanstack_categories", last_query, { hitsPerPage: 3 });
          algolia.addQueryInBatch("leanstack_cloudstack", last_query, { hitsPerPage: 3 });
          algolia.addQueryInBatch("leanstack_products", last_query, { hitsPerPage: 5 });
          algolia.sendQueriesBatch(searchCallback);
      }

      $("#searchbox").keyup(function() {
          search();
      });
  });
</script>