自動完成與數據表

我工作在codeigniter框架。我用數據表進行排序，fitering，分頁等。在我看來，頁面我有自動完成與數據表

table class="table table-bordered datatable" id="table_export"

和腳本

jQuery(document).ready(function($) 
{ 


    var datatable = $("#table_export").dataTable({ 
     "sPaginationType": "bootstrap",

這一行我得到的搜索，並一直與它的風格。但問題是我想實現搜索按鈕的自動完成。有沒有選擇在數據表中實現自動完成？由於我感到很難編輯數據表的jquery。

任何暗示？提前致謝。

來源

2015-08-26 Ajzz

一旦經過這個網站，它可能會幫助你 - > http://jqueryui.com/autocomplete/和https://github.com/vedmack/yadcf –

但在大多數教程中，自動完成是通過搜索框。這裏我們有jquery文件中的搜索框。搜索完成後，返回整個表格。 – Ajzz

在數據表中使用自動完成的任何示例？地方？ – Ajzz

我不知道，這是否爲u想要什麼，怎麼autcomplete在datatable.just集enable_auto_complete使用只是一個例子：在相關列真（在下面的代碼COLUMN_NUMBER欄：3）：

$(document).ready(function(){ 
    $('#example').dataTable().yadcf([ 
    {column_number : 0}, 
    {column_number : 1, filter_container_id: "external_filter_container"}, 
    {column_number : 2, data:["Yes","No"], filter_default_label: "Select Yes/No"}, 
    {column_number : 3, text_data_delimiter: ",", enable_auto_complete: true}, 
    {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]); 
});

或者是這樣的....

<script> 
$("#autocompleteTable").dataTable({ 
    aaData : [], 
    bLengthChange : false, 
    bPaginate : false, 
    bInfo : false, 
    bFilter : false, 
    aoColumns : [ { 
    mDataProp : 'firstName', 
    sTitle : 'First Name' 
}, { 
    mDataProp : 'lastName', 
    sTitle : 'Last Name' 
}, { 
    mDataProp : 'address', 
    sTitle : 'Address' 
} ] 
}); 
</script>

上面代碼的詳細檢查 - >https://caffeinatedcoding.wordpress.com/2011/09/28/roll-your-own-autocomplete-table-with-jquery-and-datatables/

來源

2015-08-26 04:45:17

感謝您的示例代碼。它工作正常。但我仍然有些困惑。這是針對表中的一個特定的colomn。 Iam試圖在表格上方的通用搜索中實現自動完成。 https://github.com/vedmack/yadcf在這個例子中，我們在表格上方有一個搜索嗎？我想在那裏實現自動過濾器。反正謝謝你的幫助:) – Ajzz

你的意思是這樣 - > http://jsfiddle.net/vqwBP/1096/ –

是的。這個。但這裏也出現了問題。我們已經給出了文本字段的ID。但對於我的情況，我需要給搜索字段的ID。和搜索是在數據表js文件 – Ajzz

您可以使用下面的代碼添加AUT ocomplete功能來搜索輸入框使用typeahead.js庫jQuery的數據表適用於引導3.

$(document).ready(function() { 
    var dataSrc = []; 

    var table = $('#example').DataTable({ 
     'initComplete': function(){ 
     var api = this.api(); 

     // Populate a dataset for autocomplete functionality 
     // using data from first, second and third columns 
     api.cells('tr', [0, 1, 2]).every(function(){ 
      var data = this.data(); 
      if(dataSrc.indexOf(data) === -1){ dataSrc.push(data); } 
     }); 

     // Initialize Typeahead plug-in 
     $('.dataTables_filter input[type="search"]', api.table().container()) 
      .typeahead({ 
       source: dataSrc, 
       afterSelect: function(value){ 
        api.search(value).draw(); 
       } 
      } 
     ); 
     } 
    }); 
});

見jQuery DataTables: Search input with autocomplete using Typeahead and Bootstrap的更多細節和演示。

來源

2017-07-01 19:19:49

自動完成與數據表

回答

相關問題