Select2 + Algolia

Algolia+Select2 to search for contacts

by sylvainutard

HTML

<link rel="stylesheet" href="http://ecos.fws.gov/js/bootstrap-2.0.3/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<input type='hidden' name='input' id='test' style="width: 500px;" />

JavaScript

var algolia = algoliasearch('YE0A9ATLJG', '1abceba46dace8485375bc325f0144b5');
var index = algolia.initIndex('Contact_development');

$(document).ready(function() {
    $('#test').select2({
        placeholder: 'Search for people by name, email, company...',
        ajax: {
            // Custom transport to call Algolia's API
            transport: function(params) {
                var q = params.data.query;
                delete params.data.query;
                index.search(q, params.data).then(function(content) {
                    params.success(content);
                });
            },
            // build Algolia's query parameters
            data: function(term, page) {
                return { query: term, hitsPerPage: 10, page: (page - 1) };
            },
            // return Algolia's results
            results: function(data, page) {
                return { results: data.hits }
            }
        },
        // build result using the highlighted attributes
        formatResult: function(contact) { 
            return "<div class='select2-user-result'>" +
                contact._highlightResult.name.value + " (" + contact._highlightResult.company.value + ")" +
                '<br />' + 
                '<small class="text-muted">' + contact._highlightResult.email.value + '</small>' +
                "</div>"; 
        },
        formatSelection: function(contact) { 
            return contact.email; 
        }
    });
});