algolia-rapgenius-demo

demo.html

<input class="quick_search autocomplete search ac_input example" data-url="/search/quick" id="q" name="q" placeholder="Search: rapper, song title, or lyrics" type="text" autocomplete="off">
<div class="suggestions" style="display: none">
  <div class="suggestions-rappers"></div>
  <div class="suggestions-songs"></div>
  <div class="suggestions-lyrics"></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 rappers = content.results[0];
      // Compute Categories popup
      var html = '';
      for (var i = 0; i < rappers.hits.length; ++i) {
        var hit = rappers.hits[i];
        if (html.length === 0) {
            html += '<div class="category-title">Rappers</div>';
        }
        html += '<a href="' + hit.url + '" class="hit">' +
          (hit.image_url ? '<img src="' + hit.image_url + '" class="thumb" />' : '') +
          '<div class="infos">' + 
            '<div class="name">' + hit._highlightResult.name.value + '</div>' +
            '<div class="text-muted">' + (hit.song_count || 0) + ' songs</div>' +
          '</div>' +
          '<div class="clearfix"></div>' +
        '</a>';
      }
      $('.suggestions-rappers').html(html);

      var songs = content.results[1];
      html = '';
      for (var i = 0; i < songs.hits.length; ++i) {
        var hit = songs.hits[i];
        if (html.length === 0) {
            html += '<div class="category-title">Songs</div>';
        }
        html += '<a href="' + hit.url + '" class="hit">' +
          '<div class="name">' + hit._highlightResult.title.value + '</div>' +
          (hit._highlightResult.primary_artist ? '<div class="by text-muted">by ' + hit._highlightResult.primary_artist.name.value + '</div>' : '') +
        '</a>';
      }
      $('.suggestions-songs').html(html);

      var lyrics = content.results[2];
      html = '';
      if (rappers.hits.length === 0 && songs.hits.length === 0 && lyrics.query.length > 2) { // come on, lyrics with <=2 letters, bong!
        for (var i = 0; i < lyrics.hits.length; ++i) {
          var hit = lyrics.hits[i];
          if (html.length === 0) {
              html += '<div class="category-title">Lyrics</div>';
          }
          var lines = hit._highlightResult.lines;
          lines.sort(function(a, b) { return b.matchedWords.length - a.matchedWords.length; });
          lines = $.map(lines, function(e) { return e.matchedWords.length == 0 ? null : e.value; }).slice(0, 3);
          if (lines.length === 0) {
            // matched only on the artist/song_name
            continue;
          }
          html += '<a href="' + hit.song_url + '" class="hit">' +
            '<div class="name">' + hit._highlightResult.song_title.value + '</div>' +
            (hit.primary_artist ? '<div class="by text-muted">by ' + hit.primary_artist + '</div>' : '') +
            '<div class="lyrics">' + lines.join('<br />') + '</div>' +
          '</a>';
        }
      }
      $('.suggestions-lyrics').html(html);

      if (rappers.hits.length > 0 || songs.hits.length > 0 || lyrics.hits.length > 0) {
        $('.suggestions').show();
      }
    }

    function search() {
        last_query = $("#q").val();
        if (last_query.length == 0) {
            $('.suggestions-rappers').empty();
            $('.suggestions-songs').empty();
            $('.powered-by-algolia').empty();
            $('.suggestions').hide();
            return;
        }
        algolia.startQueriesBatch();
        algolia.addQueryInBatch("rapgenius_rappers", last_query, { hitsPerPage: 3 });
        algolia.addQueryInBatch("rapgenius_songs", last_query, { hitsPerPage: 5 });
        algolia.addQueryInBatch("rapgenius_lyrics", last_query, { hitsPerPage: 3 });
        algolia.sendQueriesBatch(searchCallback);
    }

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