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

【问题标题】：jquery select2 with bloodhound.js suggestion engine带有 Bloodhound.js 建议引擎的 jquery select2
【发布时间】：2014-06-18 18:29:33
【问题描述】：

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

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

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

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

【问题讨论】：

标签： jquery angularjs angular-ui jquery-select2 bloodhound

【解决方案1】：

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

在 select2 的 query 方法中，调用您的 Bloodhound 引擎的 get 方法并将搜索词和回调传递给它。 Bloodhound 将调用此 cb 并将结果对象数组传递给它。 Select2 想要将此数组包装在一个对象中，例如 {results: bloodHoundArray}，因此您的 cb 需要进行数据包装。
确保您的 Bloodhound 的 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});});
                 }
 });

【讨论】：

如果有人偶然发现这个 sn-p：根据 github 上的 Bloodhound 文档（2015 年 2 月 9 日），您不能将字符串传递给 engine.get。改用 engine.search()

【解决方案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
        });

    })

【讨论】：