Helper getting started, step 1: first search

_helper_gettingstarted_1.md

AlgoliaSearch Helper - getting started - step 1

In this sample, we cover those topics:

• how to instanciate the helper
• listen to the result event and read the results from Algolia
• trigger a search to algolia

See on jsFiddle

fiddle.css

#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% - 150px - 4em);
}
#container li {
  padding: 8px 0;
}

#container em {
  background: yellow;
}

fiddle.html

<pre id=container></pre>

<script src="https://cdn.jsdelivr.net/g/algoliasearch@3(algoliasearchLite.min.js),algoliasearch.helper@2"></script>`

fiddle.js

//Config
var applicationID = 'latency';
var apiKey = '249078a3d4337a8231f1665ec5a44966';
var index = 'bestbuy';

var client = algoliasearch(applicationID, apiKey);
var helper = algoliasearchHelper(client, index);

helper.on('result', function(content) {
  renderHits(content);
});

function renderHits(content) {
  $('#container').html(JSON.stringify(content, null, 2));
}
 
helper.search();

fiddle.manifest

name: Helper getting started / step 1
description: First search with the helper
authors:
  - Algolia
resources:
  - https://cdn.jsdelivr.net/algoliasearch/3.15.1/algoliasearchLite.min.js
  - https://cdn.jsdelivr.net/algoliasearch.helper/2.10.0/algoliasearch.helper.min.js
normalize_css: yes
wrap: b