Helper getting started, step 2: setting the query

_helper_gettingstarted_2.md

AlgoliaSearch Helper - getting started - step 2

In this sample, we cover those topics:

• how to set the query of the search
• how to trigger the search
• how to display highlighting to help our users
• how to plug all these to make an interactive search

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

<input type="text" autocomplete="off" id="search-box"/>

<ul id=container></ul>

<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('').append(function() {
    return $.map(content.hits, function(hit) {
      return $('<li>').html(hit._highlightResult.name.value);
    });
  });
}

$('#search-box').on('keyup', function() {
  helper.setQuery($(this).val())
        .search();
});

helper.search();

fiddle.manifest

name: Helper getting started / step 2
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