Auto complete with datatables jquery search

Question

I want to implement Auto complete http://jqueryui.com/autocomplete/ to filter on each column

in datatables jquery plugin.

For example if i want to search Embeded Devices with ED in datatables search it will not do it for me...So i want to show auto complete and when user select it from list then i want datatable to filter.

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

How i can do it?

Answer 1

You can use my plugin for that , take a look at the example : 4'th column

Here is the link to the github of my plugin:

Yet Another DataTables Column Filter - (yadcf)

Here is a code snippet, just set enable_auto_complete: true in relevant columns (in the below 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

It might be too late,but after so much research and googling I ended up writing my own autocomplete.It was little tedious but the good thing is it works.First I built the js array containing all the columns of the table.Kept the array as source for autocomplete my own textbox and used it for search. One trick is embed an anchor tag inside the td tags to enable to set focus on the searched text. oTable is my datatable.myInputTextField is out of the box input box where I can search for the text.To enable facebook like autocomplete use the @ in the 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();        
});