Javascript 如何使用Algolia和transport实现Select2 Ajax

我正在建立一个typeahead搜索字段，我遇到了一些问题。我不太确定显示结果的正确方法是什么。当我输入字段时，会找到结果，但字段不会更新。这是我的密码：

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

选择供应商
var$select=$（“#供应商选择”）；
var client=algoliasearch（“[INDEX]”，“[PUBLISHABLE_KEY]”）；
var index=client.initIndex（“供应商开发”）；
//函数formatSearchResult（res）{
//log（'格式搜索结果：'，res）；
// }
$select.select2({
阿贾克斯：{
//调用Algolia API的自定义传输
传输：功能（参数）{
var q=params.data.query.term；
index.search（q，函数searchDone（错误，内容）{
如果（！err）{
参数结果（内容）；
}
});
},
//构建Algolia的查询参数
数据：功能（术语，第页）{
返回{query:term，hitsPerPage:10，page:（page-1）}；
},
//返回Algolia的结果
结果：功能（数据、页面）{
返回{results:data.hits}；
//我注意到data.hits对象具有objectID，而不是select2需要的id属性
//但是，即使使用对象具有'id'属性的测试数组，它也不起作用。
},
缓存：真
},
“语言”：{
“noResults”：函数（）{
return“没有匹配的供应商。请创建一个新供应商。”
}
},
escapeMarkup:函数（标记）{return markup；}，
最小输入长度：1//，
//templateResult:formatSearchResult
//templateSelection:formatRepoSelection
});

---

我错过了什么

您的问题在

结果

函数中，您可以

返回{return{….}

---

这是一个工作模式，如果你想玩：）

你的问题在

结果

函数中，你可以

返回{return{…}

---

这是一个正在使用的工具，如果你想玩：）

因此@redox使用旧版本的Select2使用旧版本的Algolia search，但我遇到的问题是Select2的版本。如果您想让最新版本的Algolia search与Select 2（版本4+）配合使用，我已经准备了一个更新的JSFIDLE：

以下是完整的代码：

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

$(document).ready(function() {
    $('#test').select2({
      placeholder: {
        id: '-1', // the value of the option
        text: 'Select A Contact'
      },
      ajax: {
        transport: function(params,success,failure) {
          var q = params.data.query.term;
          index.search(q, function searchDone(err, content) {
            if( !err ){
              success(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
          };
        }
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 1,
      templateSelection: function(contact){
        if( contact.id=='-1' || contact.loading == true ){
            return contact.text;
        }else{
          return contact._highlightResult.email.value;
        }
      },
      templateResult: function(contact){
        if( contact.id=='-1' || contact.loading == true ){
            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>"; 
        }
      },
      "language": {
          "noResults": function(){
              return "No matching vendor. <a data-toggle='modal' data-target='#create-vendor-modal'>Create a new one</a>."
           }
      },
    });
});

var algolia=algoliasearch（'YE0A9ATLJG'，'1abceba46dace8485375bc325f014b5'）；
var index=algolia.initIndex（‘联系单位开发’）；
$（文档）.ready（函数（）{
$（“#测试”）。选择2({
占位符：{
id:'-1'，//选项的值
文本：“选择联系人”
},
阿贾克斯：{
传输：功能（参数、成功、失败）{
var q=params.data.query.term；
index.search（q，函数searchDone（错误，内容）{
如果（！err）{
成功（参数结果（内容））；
}
});
},
//构建Algolia的查询参数
数据：功能（术语，第页）{
返回{query:term，hitsPerPage:10，page:（page-1）}；
},
//返回Algolia的结果
结果：功能（数据、页面）{
返回{
结果：data.hits
};
}
},
escapeMarkup:函数（标记）{return markup；}，
最小输入长度：1，
模板选择：功能（联系人）{
if（contact.id='-1'| | contact.load==true）{
返回contact.text；
}否则{
返回联系人。\u highlightResult.email.value；
}
},
templateResult:函数（联系人）{
if（contact.id='-1'| | contact.load==true）{
返回contact.text；
}否则{
返回“”+
联系人._highlightResult.name.value+“（“+联系人._highlightResult.company.value+”）+
“
”+
''+联系方式。_highlightResult.email.value+''+
""; 
}
},
“语言”：{
“noResults”：函数（）{
return“没有匹配的供应商。请创建一个新供应商。”
}
},
});
});

所以@redox让旧版本的Algolia search与旧的Select2一起工作，但我遇到的问题是Select2的版本。如果您想让最新版本的Algolia search与Select 2（版本4+）配合使用，我已经准备了一个更新的JSFIDLE：

以下是完整的代码：

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

$(document).ready(function() {
    $('#test').select2({
      placeholder: {
        id: '-1', // the value of the option
        text: 'Select A Contact'
      },
      ajax: {
        transport: function(params,success,failure) {
          var q = params.data.query.term;
          index.search(q, function searchDone(err, content) {
            if( !err ){
              success(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
          };
        }
      },
      escapeMarkup: function (markup) { return markup; },
      minimumInputLength: 1,
      templateSelection: function(contact){
        if( contact.id=='-1' || contact.loading == true ){
            return contact.text;
        }else{
          return contact._highlightResult.email.value;
        }
      },
      templateResult: function(contact){
        if( contact.id=='-1' || contact.loading == true ){
            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>"; 
        }
      },
      "language": {
          "noResults": function(){
              return "No matching vendor. <a data-toggle='modal' data-target='#create-vendor-modal'>Create a new one</a>."
           }
      },
    });
});

var algolia=algoliasearch（'YE0A9ATLJG'，'1abceba46dace8485375bc325f014b5'）；
var index=algolia.initIndex（‘联系单位开发’）；
$（文档）.ready（函数（）{
$（“#测试”）。选择2({
占位符：{
id:'-1'，//选项的值
文本：“选择联系人”
},
阿贾克斯：{
传输：功能（参数、成功、失败）{
var q=params.data.query.term；
index.search（q，函数searchDone（错误，内容）{
如果（！err）{
成功（参数结果（内容））；
}
});
},
//构建Algolia的查询参数
数据：功能（术语，第页）{
返回{query:term，hitsPerPage:10，page:（page-1）}；
},
//返回Algolia的结果
结果：功能（数据、页面）{
返回{
结果：data.hits
};
}
},
escapeMarkup:函数（标记）{return markup；}，
最小输入长度：1，
模板选择：功能（联系人）{
if（contact.id='-1'| | contact.load==true）{
返回contact.text；
}否则{
返回联系人。\u highlightResult.email.value；
}
},
templateResult:函数（联系人）{
if（contact.id='-1'| | contact.load==true）{
返回contact.text；
}否则{
返回“”+
联系人._highlightResult.name.value+“（“+联系人._highlightResult.company.value+”）+
“
”+