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
Last active
June 24, 2016 13:21
-
-
Save bobylito/80e20fcda7f3894ade08eb2c3759516b to your computer and use it in GitHub Desktop.
Helper getting started, step 2: setting the query
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
| #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; | |
| } |
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
| <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>` |
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
| //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(); |
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
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment