Question

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

我在网站的其他区域使用猎犬获得提前建议，并且我已经初始化了一个血腥引擎用于我想要用于select2的数据集。

我无法理解如何使用select two查询选项通过bloodhound而不是ajax访问数据的文档

有没有人有这两个图书馆一起工作的例子？

Answer 1

我最近必须在Marionette上下文中执行此操作，但它与angular不应有太大差别，因为我们只处理javascript。你需要做两件事才能让twitter bloodhound与select2兼容。

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

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

    })

jquery select2 with bloodhound.js建议引擎

2 个答案: