<!--  this is an experimental of algolia search -->

<div class="search">

    <input type="text" placeholder="search...">
</div>
<div class="results">
    <ul id="users"></ul>
</div>

<script src="http://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>

<script>
    $(document).ready(function() {
        var client = algoliasearch('{{site.algolia_application_id}}', '{{site.algolia_search_only_api_key}}');
        var index = client.initIndex('{{site.algolia_index_name}}');
        var $input = $('input');
        $input.keyup(function() {
            index.search($input.val(), {
                hitsPerPage: 10,
                facets: '*'
            }, searchCallback);
        }).focus();
    });

    function searchCallback(err, content) {
        console.log(content);
        if (err) {
            console.error(err);
            return;
        }

        var $users = $('#users');
        $users.empty();

        for (var i = 0; i < content.hits.length; i++) {
            $users.append('<li> <a href="' + content.hits[i].url + '">' + content.hits[i].title + '</a> ' + content.hits[i]._highlightResult.body.value + '</li>');
        }
    };
</script>