Algolia - Demo

algolia-demo.js

<script type="text/javascript">
  var apiClient = new AlgoliaSearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');
  var idx = apiClient.initIndex('tvshows');

  function displayShowCallback(success, content) {
    html = '';
    for (var i = 0; i < content.hits.length; ++i) {
      html += '<tr>' +
              '  <td class="text-center"><img src="' + content.hits[i].image + '></td>' +
              '  <td class="text-left">' + content.hits[i].show_name + '</td>' +
              '  <td class="text-center">' + content.hits[i].nb_followers + '</td>' +
              '</tr>';
    }
    $('#shows-body').html(html);
  }
  function displayEpisodeCallback(success, content) {
    html = '';
    for (var i = 0; i < content.hits.length; ++i) {
      html += '<tr>' +
              '   <td class="text-left">' + content.hits[i].season[1] + '<br/>' + content.hits[i].episode_name + '</td>' +
              '      <td class="text-center"><img src="' + content.hits[i].image + '></td>' +
              '      <td class="text-left">' + content.hits[i].episode_of + '</td>' +
              '</tr>';
    }
    $('#episodes-body').html(html);
  }
  function displayActorCallback(success, content) {
    html = '';
    for (var i = 0; i < content.hits.length; ++i) {
      html += '<tr>' +
              '  <td class="text-left">' + content.hits[i].actor_name + '</td>' +
              '  <td class="text-center"><img src="' + content.hits[i].image + '></td>' +
              '  <td class="text-left">' + content.hits[i].actor_in + '</td>' +
              '</tr>';
    }
    $('#actors-body').html(html);
  }
  function searchCallback(success, content) {
      if (content.query != $("#inputfield").val())
          return;
      if (content.hits.length == 0) {
        $('.queries').hide();
        return;
      }
      res = '';
      for (var i = 0; i < content.hits.length; ++i) {
        res += '<div class="query">';
        if (content.hits[i].type == 'show') {
          res += '<div class="query-right title-alone">' + content.hits[i]._highlightResult.show_name.value;
        } else if (content.hits[i].type == 'episode') {
            res += '<div class="query-right">' + content.hits[i]._highlightResult.episode_of.value;
            res += '<br/><div class="subtitle"><div class="category-title">Episode: </div>' + 
                   content.hits[i]._highlightResult.episode_name.value + '</div>';

        } else if (content.hits[i].type == 'actor') {
            res += '<div class="query-right">' + content.hits[i]._highlightResult.actor_in.value;
            res += '<br/><div class="subtitle"><div class="category-title">Actor: </div>' + 
                    content.hits[i]._highlightResult.actor_name.value + '</div>';
        }
        res += '</div><div class="query-left"><img src="' + content.hits[i].image + '"/></div>';
        res += '</div>';
      }
      $('.queries').html(res);
      $('.queries').show();
  }

  function search(query) {
    if (query.length == 0) {
      $('.queries').hide();
      return;
    }
    idx.search(query, searchCallback, { "hitsPerPage": 5, "getRankingInfo": 1});
  }

  $(document).ready(function() {
    var inputfield = $('#inputfield');
    inputfield.keyup(function() {
        search(inputfield.val());
    });
  }
</script>