jquery select2 with bloodhound.js 추천 엔진

Question

나는 angle-ui selector2 래퍼 톰을 사용하여 일부 태깅 기능을 구현합니다.

나는 제안을 위해 사이트의 다른 영역에서 bloodhound를 사용하고 있으며, select2로 사용하려고하는 데이터 세트에 대해 이미 초기화 된 bloodhound 엔진이 있습니다.

난 그냥

사람이 함께 작업이 두 라이브러리의 예를 가지고 있는가

대신 아약스의 블러드 하운드를 통해 데이터에 액세스 할 선택이 쿼리 옵션을 사용하는 방법에 대한 문서를 grok 수 없습니다?

Answer 1

최근에는 마리오네트 컨텍스트에서이 작업을 수행해야했지만, 자바 스크립트 만 처리하기 때문에 각도와 많이 다르지 않아야합니다. twitter bloodhound가 select2와 호환되도록하려면 2 가지 작업을 수행해야합니다.

1. 선택 2의 query 방법, 당신의 블러드 하운드 엔진의 get 메서드를 호출하고 그것을 검색어와 콜백을 전달합니다. Bloodhound는이 cb를 호출하고 결과 객체의 배열을 전달합니다. Select2는 {results: bloodHoundArray}처럼이 배열을 객체에 래핑하려고하므로 cb가 데이터 배치를 수행해야합니다.
2. bloodhound의 prefetch 또는 remote 구성에 원시 결과를 적어도 id 및 text 필드가있는 개체로 매핑하는 필터 기능이 있는지 확인하십시오. 이는 select2가 의존하는 항목이기 때문입니다. 여기

는 것을 명확하게하는 예입니다

선택 2 v4를 함께 사용

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

사람이 조각에 실수를 한단다 경우

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

    })