<script src=""></script>

<input autocomplete="off" id="search-box" id="q" placeholder="Search for a product..." type="text" spellcheck="false"/>

<div class="hits-wrapper" id=container>
  <h1>Results</h1>
  <div id="hits"></div>
</div>

* {
  font-family: 'helvetica', sans-serif;
}

#search-box {
  margin: 1em 1em 3em;
  width: calc(100% - 2em);
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
}

#facet-list,
#container {
  max-width: 150px;
  width: 100%;
  float: left;
  padding: 0 1em;
  margin: 0;
  list-style: none;
}

#facet-list li {
  padding: 6px 0;
  border-bottom: 1px solid #ccc;
}

#facet-list li input {
  margin-right: 6px;
}

#container {
  max-width: calc(100% - 4em);
}

#container .hit {
  padding: 8px 0;
}

#container em {
  background: yellow;
  font-style: normal;
}

// Algolia client. Mandatory to instantiate the Helper.
var algolia = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');

// Algolia Helper
var helper = algoliasearchHelper(algolia, 'bestbuy', {
  facets: ['type', 'shipping', 'salePrice'],
  disjunctiveFacets: ['category', 'manufacturer'],
  hitsPerPage: 5,
  maxValuesPerFacet: 5,
  getRankingInfo: true
});

// Bind the result event to a function that will update the results
helper.on("result", searchCallback);

// The different parts of the UI that we want to use in this example
var $inputfield = $("#search-box");
var $hits = $('#hits');

// When there is a new character input:
// - update the query
// - trigger the search
$inputfield.keyup(function(e) {
  helper.setQuery($inputfield.val()).search();
});

// Trigger a first search, so that we have a page with results
// from the start.
helper.search();

// Result event callback
function searchCallback(content) {
  if (content.hits.length === 0) {
    // If there is no result we display a friendly message
    // instead of an empty page.
    $hits.empty().html("No results :(");
    return;
  }

	// Hits/results rendering
  renderHits($hits, content);
}

function renderHits($hits, results) {
  // Scan all hits and display them
  var hits = results.hits.map(function renderHit(hit) {
    // We rely on the highlighted attributes to know which attribute to display
    // This way our end-user will know where the results come from
    // This is configured in our index settings
    var highlighted = hit._highlightResult;
    var attributes = $.map(highlighted, function renderAttributes(attribute, name) {
      return (
        '<div class="attribute">' +
        '<strong>' + name + ': </strong>' + attribute.value +
        '</div>');
    }).join('');
    return '<div class="hit panel">' + attributes + '</div>';
  });
  $hits.html(hits);
}