將引導程序typeahead js與Bootstrap Datatable集成

Question

我使用引導程序數據表Datatables和引導程序taginput與typehead.js。我是新的引導數據表。

這是我的引導程序數據表Example的佈局，請考慮Bootstrap標記輸入框在上面。

我想用自舉標記元素搜索數據表記錄。但不知何故，我無法搜索引導標籤。

在此先感謝。

Answer 1

如果您從桌面上獲得的空數組開始，您可以通過替換內置的搜索框來做一些巧妙的事情。在我鏈接到我的例子不在乎列約一，在其他列需要一點點的格式：

var words = []; 
var table = $('#example').DataTable({ 
    "columns": [ 
     null, { 
      "render": function(data, type, row) { 
       ~words.indexOf(data) || words.push(data); 
       return data; 
      } 
     }, { 
      "render": function(data, type, row) { 
       var d = data.replace(/\, /g, " "); 
       ~words.indexOf(d) || words.push(d); 
       return data.split(", ").join("<br/>"); 
      } 
     } 
    ], 
    "initComplete": function() { 
     var searchBox = $("#example_wrapper").find("input[type='search']"); 
     var searchBoxHolder = searchBox.parent(); 
     searchBox.empty().remove(); 
     searchBoxHolder.append($("<input/>", { 
      "type": "text" 
     }).typeahead({ 
      source: words, 
      afterSelect: function(word) { 
       table.search(word).draw(); 
      } 
     }).on("keyup", function(x) { 
      if (words.indexOf($(x.target).val()) === -1) { 
       table.search($(x.target).val()).draw(); 
      } 
     })); 
    } 
}); 

基本上我們在這裏所做的是創建搜索項的空白陣列，然後迭代每個第二和第三個單元格，並將該術語添加到該數組（如果它不存在）。在第三個單元的情況下，我需要清除一些格式（額外的逗號）。然後我們得到原來的搜索框，它是父母。刪除原始文件並將新文件追加到父文件中。然後我們將其設置爲typeahead以及搜索項的列表。我們需要確保它仍然像原來的一樣，因此我們添加了keyup函數。我希望這是有道理的。

工作實例是here，希望有所幫助。