Skip to content

Instantly share code, notes, and snippets.

@seafoox
Created September 1, 2014 10:08
Show Gist options
  • Save seafoox/5f7b6e8687aa8e14102c to your computer and use it in GitHub Desktop.
Save seafoox/5f7b6e8687aa8e14102c to your computer and use it in GitHub Desktop.
algolia-rapgenius-demo
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment