如何让 Select2 Ajax 使用 Algolia 和传输
How to get Select2 Ajax working with Algolia and transport
我正在构建一个预输入搜索字段,我 运行 遇到了问题。我不太确定显示结果的正确方法是什么。当我在该字段中键入时,找到了结果,但该字段没有更新。这是我的代码:
<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>
我错过了什么?!?!?
您的问题出在 results
函数中,您 return { return { .... } }
.
如果你想玩的话,这里有一个工作 JSFiddle with Select2 v3 and JSFiddle with Select2 v4:)
所以@redox 得到了旧版本的 Algolia 搜索与旧的 Select2 一起工作,但我 运行 遇到的问题是 Select2 的版本。如果您希望最新版本的 Algolia 搜索与 Select 2(版本 4+)一起使用,我整理了一个更新的 JSFiddle:
http://jsfiddle.net/biznickman/r1h3afm9
完整代码如下:
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>."
}
},
});
});
我正在构建一个预输入搜索字段,我 运行 遇到了问题。我不太确定显示结果的正确方法是什么。当我在该字段中键入时,找到了结果,但该字段没有更新。这是我的代码:
<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>
我错过了什么?!?!?
您的问题出在 results
函数中,您 return { return { .... } }
.
如果你想玩的话,这里有一个工作 JSFiddle with Select2 v3 and JSFiddle with Select2 v4:)
所以@redox 得到了旧版本的 Algolia 搜索与旧的 Select2 一起工作,但我 运行 遇到的问题是 Select2 的版本。如果您希望最新版本的 Algolia 搜索与 Select 2(版本 4+)一起使用,我整理了一个更新的 JSFiddle:
http://jsfiddle.net/biznickman/r1h3afm9
完整代码如下:
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>."
}
},
});
});