jquery - 带有 Bloodhound.js 建议引擎的 jquery select2

Question

我正在使用 angular-ui selector2 包装器实现一些类似标记的功能。

我在网站的其他区域使用 Bloodhound 来提供预先输入的建议，并且我已经为要使用 select2 的数据集初始化了一个 Bloodhound 引擎。

我只是无法理解有关如何使用选择两个查询选项通过 Bloodhound 而不是 ajax 访问数据的文档

有没有人有这两个库一起工作的例子？

Answer 1

我最近不得不在 Marionette 上下文中执行此操作，但它与 Angular 应该没有太大区别，因为我们只处理 javascript。你需要做两件事来使 twitter Bloodhound 与 select2 兼容。

1. 在 select2 的query方法中，调用你的 Bloodhound 引擎的get方法并将搜索项和回调传递给它。Bloodhound 将调用此 cb 并将结果对象数组传递给它。Select2 希望将此数组包装在一个对象中，就像这样，{results: bloodHoundArray}因此您的 cb 需要进行数据包装。
2. 确保您的寻血猎犬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});});
                 }
 });

Answer 2

与 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
        });

    })