5

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?

2 Answers2

2

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"}]);
});
Daniel
  • 36,833
  • 10
  • 119
  • 200
  • Here are few issues,my text delimiter is not ','.can i get this from database?Also i want to hightlight matched text –  Jun 25 '13 at 07:12
  • regarding the `text_data_delimiter` , its an optional argument , you don't have to use it, you can use the `enable_auto_complete: true` alone , like this : `{column_number : 3, enable_auto_complete: true}` , go over the plugin example / docs... you can place any `text_data_delimiter` , so yes you can take it from your db and pass it to the plugin , if you want to *highlight matched text* you can open an issue on my plugin github page and I will try to implement it... – Daniel Jun 25 '13 at 08:01
  • It only search for consective characters like it fails in this case..i have "Jumera Lakes Towers" and when i type JLT,it do not work..can we do some thing for this? –  Jun 25 '13 at 08:27
  • this is not how the autocomplete works... a workaround could be to display `Jumera Lakes Towers (JLT)` than the autocomplete will be able to find it... You might try to playing with the jQuery autocomplete , maybe write some custom function , and I will be able to extend my plugin to use it for doing autocomplete , take a look at this : http://stackoverflow.com/questions/2382497/jquery-ui-autocomplete-widget-search-configuration – Daniel Jun 25 '13 at 08:38
  • Hi @daniel I am using datatables on our website, I want to have a auto-complete feature. I am on your github, what files I should link from your github and into my framework? In other words how do I have your plug-in into my framework? please help!! –  Nov 10 '16 at 18:02
  • 1
    you need yadcf js and css, for auto complete you must also include jquery ui js and css (it must contain the auto complete widget), in case of errors in console - google it, good luck – Daniel Nov 10 '16 at 22:15
0

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();        
});
Harish
  • 3,343
  • 15
  • 54
  • 75