Last active
February 14, 2018 10:28
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div> | |
<input id="resources-input" placeholder="Search for products"> | |
</div> | |
<div id="type-refinement"> | |
</div> | |
<div class="resources"> | |
<div id="resources"></div> | |
</div> | |
<div id="pagination"></div> | |
<script type="text/html" id="hit-template"> | |
<div class="resources_item"> | |
Text check | |
{{title}} | |
</div> | |
</script> | |
<script type="text/html" id="type-template"> | |
<li>{{label}}</li> | |
<li>{{type}}</li> | |
</script> | |
<script | |
src="http://code.jquery.com/jquery-3.3.1.js" | |
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" | |
crossorigin="anonymous"></script> | |
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script> | |
<script src="//cdn.jsdelivr.net/autocomplete.js/0/autocomplete.min.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.3/dist/instantsearch.min.js"></script> | |
<script> | |
var search = instantsearch({ | |
// Replace with your own values | |
appId: 'xxxxxxxxxxxxx', | |
apiKey: 'xxxxxxxxxxxx', // search only API key, no ADMIN key | |
indexName: 'resources', | |
urlSync: true, | |
searchParameters: { | |
hitsPerPage: 12 | |
} | |
}); | |
search.addWidget( | |
instantsearch.widgets.searchBox({ | |
container: '#resources-input' | |
}) | |
); | |
search.addWidget( | |
instantsearch.widgets.hits({ | |
container: '#resources', | |
templates: { | |
item: document.getElementById('hit-template').innerHTML, | |
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>" | |
} | |
}) | |
); | |
search.addWidget( | |
instantsearch.widgets.pagination({ | |
container: '#pagination' | |
}) | |
); | |
search.addWidget( | |
instantsearch.widgets.refinementList({ | |
container: '#type-refinement', | |
attributeName: 'type', | |
sortBy: ["name:asc","isRefined","count:desc"], | |
templates: { | |
header: 'Type' | |
} | |
}) | |
); | |
search.start(); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment