JQuery autoComplete on dataTables THEAD

tsakal

Hello Alan.

I have two links to explain my problem :

1. http://tsakal.net/dtdemo/autoCompleteOnBody.php?datekin=2016-02-10
2. http://tsakal.net/dtdemo/autoCompleteOnHead.php?datekin=2016-02-10

The code is the same, except for the position of the first input line.
The first link the input line is first in the table body. In the second link the same line is last in the table head.

In every cell of the two first input columns must fires a JQuery autoComplete after a dash (-) key press. This is o.k. in every cell, except the two cells of the second link (the autoComplete call positioned inside THEAD).

Any Ideas?

Regards
Evangelos

allan

except for the position of the first input line

I'm afraid I don't understand this. What do you mean by "first input line"? Could you show me the difference in the code?

Allan

tsakal

Hallo Allan.

The "first input line" has a "+" sign in the right.

The unique difference in the code is that this "first input line" is before "</thead>" in one file ( http://tsakal.net/dtdemo/autoCompleteOnHead.php?datekin=2016-02-10 ) and after "<tbody>" in the other ( http://tsakal.net/dtdemo/autoCompleteOnBody.php?datekin=2016-02-10 ).

Regards

Evangelos

allan

You are using an old version of DataTables - could you try updating that to the current release in the first instance please.

The next think to try would be to see what happens if you initialise jQuery UI AutoComplete after the DataTable.

Allan

tsakal

Thaks Allan.

It's working with dataTables last version (1.10.11), for both places THead / TBody.

But now it's not working for lines after the first page.

I will try to initialase JQuery UI autoComplete after the dataTable.

Evangelos

allan

Use the DataTables API to get the rows to "enhance" with jQuery UI rather than just using jQuery (see the second top FAQ for why this is the case).

For example:

$( table.rows().nodes() ).find( ".accountFind" ).autocomplete({
  ...
} );

Allan

tsakal

Hello Allan.

Now jQuery events functions on every page, but not for those events located on THead.

To solve this I put an instance in its original place, inside the :

$(document).ready(function(){

...

});

Thank you.

Evangelos