How to detect when filter field gets cleared by the 'x' button click

xmojmr

I have pretty basic dataTables setup, using jQuery UI etc. as recommended. When the default filter search box has focus there appears an 'x' button (appears in IE11, Chrome. Does not appear in Firefox).

When I click the 'x' button the search box gets cleared and the dataTable gets redrawn with new filter correctly applied.

What I want is to respond to this event in some $(input).on('xclicked', ..) or through some event in the dataTables api. I need to some hash fragment updates and other stuff.

I'm completely lost, don't know where the 'x' button comes from, I did not find it in any linked 'css' files, looking for 'hover', 'focus'. Also the DOM breakpoints did not help, Google did not give me useful hints and neither did the datatables forums.

I think it is a basic dataTables question, so please, can someone give me the basic answer? (I guess a test case for inspection will not be needed)

xmojmr

ok, I'm answering my question (I still don't know where does the 'x' button come from and how can I detect it was clicked on).

In order to detect when dataTables do the search (e.g. because of the 'x' button being clicked) you can use the search.dt callback as described here: http://datatables.net/reference/event/search

(I used some F11 debugging of the dataTables core, starting from breakpoint set at _fnDraw)

allan

I'm presuming you are using Windows? It is part of the Window GUI toolkit and is not something that DataTables is adding. Textboxes have that x box now... I think they emit a clear event when they are clicked on and you can listen for that. DataTables 1.10 does listen for that event and should operate correctly, clearing the global filter when clicked on.

Allan

xmojmr

yes Allan, I'm testing mainly on Windows but the same 'x' box appears e.g. in OpenSUSE Linux running Google Chrome 29.0.1547.76.

Given your search tip I have found some explaining articles here:

• http://stackoverflow.com/questions/2977023/how-do-you-detect-the-clearing-of-a-search-html5-input
• http://stackoverflow.com/questions/2492722/are-there-any-events-available-for-the-reset-option-for-input-search
• http://stackoverflow.com/questions/14498396/event-fired-when-clearing-text-input-on-ie10-with-clear-icon

The final solution that works for me is either handle the search.dt event on the dataTables api (works both for keyboard input and for special 'x' click mouse input):

$('table').on('search.dt', saveState1);

or handle events keyup and input on the search box (works both for keyboard input and for special 'x' click mouse input - also on IE11):

var $input = $('.dataTables_filter :input[type=search]').focus();

$input.on('input', saveState2)

$input.keyup(saveState3)

allan

Good to hear the DataTables event helped to resolve it.

Allan

xmojmr

yes Allan, the new API is quite nice and useful.

Is it somehow easily possible to throttle the filter/sort/draw frequency in the scenario when server-side-processing is not used? Similar to what fnSetFilteringDelay did?

allan

The global filtering input in server-side processing mode in 1.10 is throttled automatically. Sorting is not, but you could easily use the API to do that if you want.

Allan

netaisllc

BTW, the "X" in the thread above is actually injected by the browser. HTML5's support of element with markup

input type=search

(meaning an input field used to collect a search term), triggers most modern browsers to add that bit of UI for clearing the field.

In case you don't want that default behavior, specify the input as "type=text" which will direct the browser to NOT add the clear-search (X) bits. Then, of course, you are responsible for providing a method to clear the element, if applicable to your use case.

Other HTML5 input types, such as number, interval, date, etc., trigger other "automatic UI".

allan

Some Windows versions do actually put the X to clear button in regular text input fields as well, which I think at least contributed to some of the problem described above. Not entirely sure why Microsoft decided to do that, but so it goes...

The clear event is what is triggered when it is activated.

Allan