如何让Select2 Ajax与Algolia一起工作并运输

Question

我正在构建一个预先搜索字段,我遇到了问题.我不太确定要显示结果的正确方法是什么.当我在字段中键入时,会找到结果但字段不会更新.这是我的代码:

<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>

我错过了什么？!？!？

Answer 1

你的问题出在results功能上return { return { .... } }.

这是一个有效的JSFiddle与Select2 v3和JSFiddle与Select2 v4如果你想玩:)