I'm building a typeahead search field and I'm running into issues. I'm not quite sure what the proper way is to get the results to display. When I type in the field, the results are found but the field isn't updating. Here's my code:

```
<select name='vendor_order[vendor_id]' id='vendor-select' class="form-control">
    <option>Choose a vendor</option>
 </select>
 <script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script type='text/javascript'>
var $select = $('#vendor-select');
var client = algoliasearch('[INDEX]', '[PUBLISHABLE_KEY]');
var index = client.initIndex('Vendor_development');

// function formatSearchResult(res){
//    console.log('format search result: ', res);
// }

$select.select2({
    ajax: {
       // Custom transport to call Algolia's API
       transport: function(params) {
          var q = params.data.query.term;
          index.search(q, function searchDone(err, content) {
              if( !err ){
                  params.results(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 };
              // I noticed that data.hits objects have objectID instead of id attribute which select2 needs
              // However even with a test array where the objects have an `id` attribute, it doesn't work. 
      },
      cache: true
  },
  "language": {
      "noResults": function(){
          return "No matching vendor. <a data-toggle='modal' data-target='#create-vendor-modal'>Create a new one</a>."
       }
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1//,
  // templateResult: formatSearchResult 
  // templateSelection: formatRepoSelection 
});
</script>

```

What am I missing?!?!?