2017-04-26 2 views
1

typehead.js로 부트 스트랩 태그 입력을 만들지 만 드롭 다운 목록에 제안한 결과가 두 개 이상입니다 (제안).bootstrap tags-input [JS] - 데이터 세트의 제안 목록에 여러 데이터를 설정하거나 표시 할 수 없습니다.

{ 
 
    "name": 
 
    [{"id": 1, "tag_name": "cat"}, 
 
    {"id": 2, "tag_name": "dog"}, 
 
    {"id": 3, "tag_name": "cow"}] 
 
}

: 원격 URL의

결과

var tag = new Bloodhound({ 
 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
 
    remote: { 
 
     url: 'http://blog.dev/admin/manager/911/fetch-tags' 
 
    } 
 
}); 
 
tag.initialize(); 
 

 
var elt = $("#tags"); 
 
elt.tagsinput({ 
 
    typeaheadjs: { 
 
     name: 'tag_name', 
 
     displayKey: 'tag_name', 
 
     valueKey: 'tag_name', 
 
     source: tag.ttAdapter(), 
 
     templates: { 
 
      empty: [ 
 
       '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>' 
 
      ], 
 
      header: [ 
 
       '<div class="list-group search-results-dropdown"></div>' 
 
      ], 
 
      suggestion: function (data) { 
 
       console.log(data); 
 
        return '<a href="javascrtipt:void(0)" class="list-group-item">' + data[1].tag_name + '</a>'; 
 
      } 
 
     } 
 
    } 
 
});
<div class="example example_typeahead"> 
 
     <input type="text" id="tags" value="Amsterdam,Washington" data-role="tagsinput"> 
 
     </div>
이 JSON 형식을 반환 :

JS : 이것은 내 프로세스 코드 CONSOLE.LOG 의하여 개발이 객체 리턴 (데이터)

[Object, Object, Object, Object, Object] 
 
0:Object 
 
id:1 
 
tag_name:"cat" 
 
__proto__:Object 
 
1:Object 
 
id:2 
 
tag_name:"dog" 
 
__proto__:Object 
 
.......

및 단지 제안리스트의 첫 번째 결과를 나타낸다. 나는 그것에 모든 결과를 보여주고 싶지만 할 수 없다.

답변

0

나는 한 가지 제안 만하고 있다고 생각합니다. 이 경우 여야합니다 -

  suggestion: function (data) { 
      console.log(data); 
      var suggestList = ""; 
      for (var i = 0; i < data.length; i++) { 
       suggestList += '<a href="javascrtipt:void(0)" class="list-group-item">' + data[i].tag_name + '</a> <br/> \n' ; 
      } 
       return suggestList; 
     } 
+0

나는 그것을 시도했지만 단지 1 행에 반환합니다. 그것을 클릭하면 입력 만 첫 번째 값을받습니다. –

+0

업데이트 : 제안 템플릿을 삭제했으며 다른 방법으로 성공적으로 수행합니다. 감사 –