我正在使用angular-ui selector2包装器tom实现一些类似标记的功能。
我在网站的其他区域使用猎犬获得提前建议,并且我已经初始化了一个血腥引擎用于我想要用于select2的数据集。
我无法理解如何使用select two查询选项通过bloodhound而不是ajax访问数据的文档
有没有人有这两个图书馆一起工作的例子?
答案 0 :(得分:3)
我最近必须在Marionette上下文中执行此操作,但它与angular不应有太大差别,因为我们只处理javascript。你需要做两件事才能让twitter bloodhound与select2兼容。
query
方法中,调用您的Bloodhound引擎的get
方法并将搜索词和回调传递给它。 Bloodhound将调用此cb并传递一组结果对象。 Select2希望这个数组包含在一个对象中,比如{results: bloodHoundArray}
,所以你的cb需要进行数据包装。prefetch
或remote
配置具有过滤功能,可将原始结果映射到至少包含id
和text
字段的对象,因为这是select2依赖的是什么。这是一个让事情更清晰的例子:
var engine = new Bloodhound({
prefetch:{
url: someUrl,
filter: function(response){
return _.map(response.results, function(obj){return {id:obj.tag, text:obj.tag};});
}
},
});
engine.initialize();
$('#elem').select2({quietMillis:300,
query: function (query) {
engine.get(query.term, function(resultArr){
query.callback({results:resultArr});});
}
});
答案 1 :(得分:0)
用于select2 v4
var engine = new Bloodhound({
local: [
'Andorra',
'Unitéd Arab Emirates',
'Antarctica'
],
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
});
engine.initialize();
$.fn.select2.amd.require([
'select2/data/ajax',
'select2/utils'
], function (BaseAdapter, Utils) {
function CustomData ($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomData, BaseAdapter);
CustomData.prototype.query = function (params, callback) {
console.log(params)
if (params.term && params.term.length > 3) {
engine.search(params.term, function (resultArr) {
var r = [];
for (var i in resultArr) {
r.push({id: i, text: resultArr[i]});
}
callback({results: r});
});
}
};
$(selector).select2({
dataAdapter: CustomData
});
})