Auto completo di ricerca datatables jQuery

Question

Voglio realizzare automatica completa http://jqueryui.com/autocomplete/ filtrare su ogni colonna

nel plug-in jQuery DataTable.

Per esempio se voglio cercare dispositivi Embeded con disfunzione erettile in DataTables cercatela non lo farà per me ... quindi voglio mostrare completamento automatico e quando l'utente seleziona dalla lista allora voglio datatable per filtrare.

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

Come posso farlo?

Answer 1

è possibile utilizzare il mio plug-in per questo, dare un'occhiata al l'esempio: 4'th column

Ecco il link al GitHub del mio plugin:

Yet Another DataTables Column Filter - (yadcf)

Ecco un frammento di codice, appena impostato enable_auto_complete: true in colonne pertinenti (nel seguente codice 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

Potrebbe essere troppo tardi, ma dopo tanta ricerca e googling ho finito per scrivere il mio autocomplete. Era un po 'noioso ma la cosa buona è che funziona. Prima ho costruito l'array js contenente tutte le colonne del tavolo. Tenuto il array come sorgente per completare automaticamente la mia propria casella di testo e usarla per la ricerca. Un trucco è incorporare un tag di ancoraggio all'interno dei tag td per abilitare la messa a fuoco sul testo cercato. oTable è my datatable.myInputTextField è fuori dalla casella di input della casella in cui posso cercare il testo. Per abilitare Facebook come completamento automatico, utilizzare @ nella casella.

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