2017-04-26 45 views
1

我使用typehead.js創建引導標籤輸入,但我無法向下拉列表中顯示多於1個結果(建議)。這是我的代碼來處理:引導標籤 - 輸入[JS] - 無法設置(或顯示)來自數據集的建議列表中的多個數據

JS:

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>
遠程URL的

結果返回此JSON格式:

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

的d此目的通過返回的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

更新:我已經刪除了建議模板,並以其他方式成功完成。謝謝 –

相關問題