Algolia Example

by ninty9notout

HTML

<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/[email protected]"></script>
<div class="search">
    <div class="search__field">
        <div class="search__input"></div>
    </div>

    <div class="search__results">

    </div>
</div>

CSS

.search__input {
    display: block;
    font-size: 16px;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding: 1em;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

.search__input:focus {
    border-color: #aaa;
}

.ais-Hits-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.ais-Hits-item + .ais-Hits-item {
    margin-top: 1em;
    padding-top: 1em;
    border-top:
}

.result-item__title, .result-item__content {
    font-size: 16px;
}

JavaScript

(function () {
    const searchClient = algoliasearch(
        '6SIND35IFL',
        'c7a3f01860d9bd696bd20ffa4df36e62'
    );

    const search = instantsearch({
        indexName: 'sitetree',
        searchClient,
    });

	search.addWidget(
        instantsearch.widgets.searchBox({
            container: '.search__input',
            searchAsYouType: false,
        })
    );
    
    search.addWidget(
        instantsearch.widgets.hits({
            container: '.search__results',
            templates: {
            	item: '<div class="result-item"><h2 class="result-item__title">{{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}</h2><div class="result-item__content">{{#helpers.highlight}}{ "attribute": "content" }{{/helpers.highlight}}</div></div>'
            }
        })
    );

    search.start();
}());