Algolia: Show all results and filter as I type
<p>As the titles says, How do I show all the results from an index and filter as I type? I've tried the following <a href="https://www.algolia.com/doc/search/instant-search/algoliahelperjs" rel="nofollow">tutorial</a> but that hasn't worked for me. </p>

<p>Edit: Here is my sample code: Both HTML and Javascript</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
        var $inputfield = $("#q");

        var algolia = algoliasearch('OT1GVDGQKZ', 'ffacd8d8c29b15be6aa68a863ee55814');

        var helper = algoliasearchHelper(algolia, 'Tarzana', {
          facets: ['Category'],
          disjunctiveFacets: ['phone'],
          hitsPerPage: 5,
          maxValuesPerFacet: 5,
          getRankingInfo: true
        });

        helper.on("result", searchCallback);

        $inputfield.keyup(function(e){
          helper.setQuery($inputfield.val()).search();
        });

        window.toggleRefine = function(facet, value) {
          helper.toggleRefine(facet, value).search();
        };

        helper.search();

        function searchCallback(content) {
          if (content.query != $inputfield.val()) {
            // do not consider out-dated queries
            return;
          }
          if (content.hits.length === 0 ) {
            // no results
            $('#hits').empty();
            $('#facets').empty();
            $('#disjunctive-facets').empty();
            return;
          }

          // Scan all hits and display them
          var hits = '';
          for (var i = 0; i &lt; content.hits.length; ++i) {
            var hit = content.hits[i];
            hits += '&lt;div class="hit panel"&gt;';
            for (var attribute in hit._highlightResult) {
              hits += '&lt;div class="attribute"&gt;' +
                '&lt;strong&gt;' + attribute + ': &lt;/strong&gt;' +
                hit._highlightResult[attribute].value +
                '&lt;/div&gt;';
            }
            hits += '&lt;/div&gt;';
          }
          $('#hits').html(hits);

          // Scan all disjunctive facets and display them
          var facets = '';
          for(var i = 0; i &lt; content.disjunctiveFacets.length; i++){
            var facet = content.disjunctiveFacets[i];
            facets += '&lt;h4&gt;' + facet.name + '&lt;/h4&gt;';
            var values = facet.data;
            for (var value in values) {
              facets += '' +
                        '&lt;div class="checkbox"&gt;&lt;label&gt;&lt;input type="checkbox" ' + (helper.isDisjunctiveRefined(facet.name, value) ? 'checked="checked"' : '') + ' onclick="toggleRefine(\'' + facet.name + '\', \'' + value + '\'); return false" /&gt;' + value + ' (' + values[value] + ')' +
              '&lt;/label&gt;&lt;/div&gt;';
            }
          }
          $('#disjunctive-facets').html(facets);

          // Scan all facets and display them
          facets = '';
          for(var i = 0; i &lt; content.facets.length ; i++){
            var facet = content.facets[i];
            facets += '&lt;h4&gt;' + facet.name + '&lt;/h4&gt;';
            facets += '&lt;ul&gt;';
            var values = facet.data;
            for (var value in values) {
              facets += '&lt;li class="' + (helper.isRefined(facet.name, value) ? 'refined' : '') + '"&gt;' +
                  '&lt;a href="#" onclick="toggleRefine(\'' + facet.name + '\', \'' + value + '\'); return false"&gt;' + value + '&lt;/a&gt; (' + values[value] + ')' +
                '&lt;/li&gt;';
            }
            facets += '&lt;/ul&gt;';
          }
          $('#facets').html(facets);
        }
      });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
    &lt;script src="//code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.js"&gt;&lt;/script&gt;
    &lt;script src="http://redcurb.com/cappitalsitenew/alg2.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://redcurb.com/cappitalsitenew/style.css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;

&lt;div class="container"&gt;
  &lt;div class="search"&gt;
      &lt;input autocomplete="off" class="autocomplete" id="q" placeholder="Search for a product..." type="text" spellcheck="false" autofocus/&gt;
  &lt;/div&gt;

  &lt;div class="col-md-4"&gt;
    &lt;div class="facets-wrapper"&gt;
      &lt;h1&gt;Disjunctive Facets&lt;/h1&gt;
      &lt;div id="disjunctive-facets"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="facets-wrapper"&gt;
      &lt;h1&gt;Facets&lt;/h1&gt;
      &lt;div id="facets"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="hits-wrapper col-md-8"&gt;
    &lt;h1&gt;Results&lt;/h1&gt;
    &lt;div id="hits"&gt;&lt;div class="hit panel"&gt;
      
      &lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>