jquery select2 with bloodhound.js建議引擎

Question

我正在使用angular-ui selector2包裝器tom實現一些標籤功能。

我在網站的其他區域使用血獵犬提前打印建議，我有一個已經初始化的數據集的血獵犬引擎，我想用select2來打。

我只是不能神交如何使用選擇兩個查詢選項通過警犬替代AJAX來訪問數據

沒有人有合作這兩個庫的示例，文檔？

Answer 1

我最近不得不在一個木偶上下文中做這個，但它不應該與角度有很大差異，因爲我們只處理javascript。你需要做兩件事才能讓twitter血犬與select2兼容。

1. 在選擇2的query方法，打電話給你的警犬引擎的get方法，並通過它與搜索字詞和一個回調。 Bloodhound會調用這個cb並將它傳遞給一組結果對象。 Select2希望將此數組包裝在一個對象中，如{results: bloodHoundArray}，因此您的cb需要執行數據打包。
2. 確保您的警犬的prefetch或remote配置具有原始結果映射到至少一個id對象和text場過濾功能，因爲這是選擇2依賴。

這裏是使事情更清晰的例子：

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

對於選擇2 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 
     }); 

    })