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">
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<select name='input' id='test'>
  <option>Choose a contact</option>
</select>

JavaScript

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

$(document).ready(function() {
    $('#test').select2({
      ajax: {
        // Custom transport to call Algolia's API
        transport: function(params, success, failure) {
         var queryParams = params.data;
         var q = queryParams.query;
         delete queryParams.query;
         index.search(q, queryParams).then(success, failure);
        },
        // build Algolia's query parameters (with page starting at 0)
        data: function(params) {
          return { query: params.term, hitsPerPage: 10, page: (params.page || 1) - 1 };
        },
        // return Algolia's results
        processResults: function(data) {
          return {
            results: data.hits,
            pagination: {
	            more: data.page + 1 < data.nbPages
            }
          };
        }
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 0,
      cache: false,
      templateSelection: function(contact){
      	if( contact.text=='Choose a contact' ){
        	return "Choose a contact";
        }else{
          return contact._highlightResult.email.value;
        }
      },
      templateResult: function(contact){
      	if( contact.text=='Choose a contact' || contact.text=='Searching…' ){
        	return contact.text;
        }else{
          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>"; 
        }
      }
    });
});