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
In this sample, we cover those topics:
See on jsFiddle
#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; | |
} |
<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>` |
//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(); |
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 |