Tự động hoàn tất với dữ liệu tìm kiếm jquery

Question

Tôi muốn triển khai Tự động hoàn tất http://jqueryui.com/autocomplete/ để lọc trên mỗi cột

trong datatables jquery plugin. Ví dụ nếu tôi muốn tìm kiếm thiết bị nhúng với ED trong tìm kiếm datatables nó sẽ không làm điều đó cho tôi ... Vì vậy, tôi muốn hiển thị tự động hoàn thành và khi người dùng chọn nó từ danh sách sau đó tôi muốn datatable để lọc.

var oTable = $('#listings_row').dataTable(); 
$("thead input").keyup(function (
       oTable.fnFilter(this.value, parseInt($(this).attr('id'))); 
      }); 


      $("thead input").each(function (i) { 
       asInitVals[i] = this.value; 
      }); 

      $("thead input").focus(function() { 
       if (this.className == "search_init") 
       { 
        this.className = ""; 
        this.value = ""; 
       } 
      }); 

      $("thead input").blur(function (i) { 
       if (this.value == "") 
       { 
        this.className = "search_init"; 
        this.value = asInitVals[$("#listings_row thead input").index(this)]; 
       } 
      }); 

Tôi có thể làm như thế nào?

Answer 1

Bạn có thể sử dụng plugin của tôi cho rằng, hãy nhìn vào ví dụ: 4'th column

Dưới đây là liên kết đến github của plugin của tôi:

Yet Another DataTables Column Filter - (yadcf)

Dưới đây là một đoạn mã, chỉ cần đặt enable_auto_complete: true trong các cột có liên quan (trong mã bên dưới 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"}]); 
}); 

Answer 2

Nó có thể là quá muộn, nhưng sau khi nghiên cứu rất nhiều và googling tôi đã kết thúc bằng văn bản autocomplete của riêng tôi. Nó đã được chút tẻ nhạt nhưng điều tốt là nó works.First tôi xây dựng các mảng js chứa tất cả các cột của bảng.Kept các mảng làm nguồn cho tự động hoàn thành hộp văn bản của riêng tôi và sử dụng nó để tìm kiếm. Một mẹo được nhúng một thẻ neo bên trong các thẻ td để cho phép đặt tiêu điểm trên văn bản tìm kiếm. oTable là datatable.myInputTextField của tôi là ra khỏi hộp đầu vào hộp nơi tôi có thể tìm kiếm các văn bản.Để kích hoạt facebook như tự động hoàn thành sử dụng @ trong hộp.

$("#myInputTextField").autocomplete({ 

    source:filterFieldValues, 
    select:function(event,ui){   
     { 
      if(ui!=null&&ui.item!=null){ 
       var searchedColumnValue=ui.item.value; 
       if(searchedColumnValue!=null||searchedColumnValue!=''){ 
        $("#myInputTextField").val(''); 
        $("#myInputTextField").val(searchedColumnValue.trim()); 
        var colValue=$("#myInputTextField").val(); 
        $("a:contains('"+colValue+"')").parents("td").toggleClass("focus"); 
        oTable.search($(this).val()).draw();        
        window.setTimeout(function(){ 
         $("a:contains("+colValue+")").focus(); 
         }, 5); 

       } 
      } 
     }   
    }, 
    focus:function(event,ui){ 

    } 
    }).autocomplete('disable') 
    .on('keypress', function(e) { 
     evt=e||window.event;    
     var code = evt.charCode || evt.keyCode;   
     //Detect whether '@' was keyed. 
     if (evt.shiftKey && code === 64) { 
      $(this).autocomplete('enable'); 
      return false; 
     }   
     oTable.search($(this).val()).draw(); 
    }); 


$("#myInputTextField").blur(function() 
{ 
    $("#myInputTextField").autocomplete('disable'); 
    oTable.search($(this).val()).draw(); 
}); 



$('#myInputTextField').on('input propertychange paste', function() {   
     oTable.search($(this).val()).draw();   
});