Auto komplett mit Datentabellen jquery Suche

Question

Ich will Auto komplett http://jqueryui.com/autocomplete/ implementieren auf jede Spalte

in Datentabellen jQuery-Plugin zu filtern.

Zum Beispiel, wenn ich Embedded Devices mit ED in der Suche nach Datatables suchen will, wird es nicht für mich tun ... So möchte ich automatisch vervollständigen und wenn Benutzer es aus der Liste auswählen, dann möchte ich Datentabelle filtern.

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)]; 
       } 
      }); 

Wie kann ich es tun? 4'th column

Hier ist der Link zu der Github meiner Plugin:

Answer 1

Sie können mein Plugin für das, werfen Sie einen Blick auf das Beispiel verwenden

Yet Another DataTables Column Filter - (yadcf)

Hier ist ein Code-Schnipsel, gerade gesetzt enable_auto_complete: true in entsprechenden Spalten (im folgenden Code 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

Es könnte zu spät sein, aber nach so viel Recherche und Googeln habe ich meine eigene Autocomplete geschrieben. Es war etwas langweilig, aber das Gute ist, dass es funktioniert. Zuerst habe ich das js-Array gebaut, das alle Spalten des Tisches enthält Array als Quelle für die automatische Vervollständigung meiner eigenen Textbox und verwendet es für die Suche. Ein Trick ist das Einbetten eines Anker-Tags in die td-Tags, um den Fokus auf den gesuchten Text zu setzen. oTable ist mein Datatable.myInputTextField ist out of the box Eingabefeld, wo ich nach dem Text suchen kann. Um Facebook wie Autocomplete zu ermöglichen verwenden Sie das @ in der Box.

$("#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();   
});