How can I add a clear button beside the search field ?

Louie

The code below works but i am wondering if there is better solution?

It would be great if this was an option because having to hit backspace to clear the search is annoying to the user when one click solution would get the job done

--- css ---

.btnClrSearch  {
  background-color: #FFFFFF;
  color: #000000;
  padding: 4px;
  text-align: center;
  margin: 2px 2px;
  border-radius: 8px;
}

--- javascript ---

var vPlTable;
var btnX = false

$( document ).ready(function()
{
  vPlTable = $('#plTable').DataTable(
  {
    <!-- put clear search btn next search box -->
    'fnDrawCallback': function (oSettings) {
       $('.dataTables_filter').each(function () {
         if (btnX == false) {
           $(this).append('<button class="btnClrSearch" onclick="btnClearSearch()">X</button>');
           btnX = true;
         }});
    },

    "scrollY":        "400px",
    "scrollCollapse":  true,
    "paging":          false,
    "info":            true,
    columnDefs: [ { className: 'select-checkbox', targets: 0} ],
    select: { style: 'multi' }
  } );
});

function btnClearSearch()
{
  vPlTable.search('').draw();
  console.log('btnClearSearch() called');
}

kthorngren

Are you asking about having an X in the default search input, when text is entered, like in this example?

Can you post a link to your page or provide a running test case showing the issue you are trying to solve?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Louie

Kevin,

Thanks for the reply.

When using the example you linked and using chrome i see the x in the search box.
When using the example you linked and using firefox i do not see the x in the search box.

I have being using firefox so today was the first time i saw the x.

Do you see the x when using firefox?

Louie

allan

I'm using Firefox and no, I don't see it either.

We use a type="search" input element for the search box in DataTables. That let's the browser perform some extra actions if it wants to - including showing the clear button.

Interesting that Firefox isn't showing it - they must have updated their input elements at some point and I've not noticed. It certainly used to have it. But it is something that I consider to be up to the browser.

Allan

allan

I found this old thread about it (looks like my memory is faulty about it ever having been there in Firefox!).

Following the bug noted there, MDN shows that it was implemented in Firefox 81, but is behind the feature flag layout.forms.input-type-search.enabled. So it's going to happen - but it might take a while for them to enable it by default!

Allan

Louie

Hi Allan,

Thanks for figuring this out and you are correct.

i enabled about:confg layout.forms.input-type-search.enabled feature in firefox and the x clear btn does show up in the search box. So hopefully firefox folks will enable this by default some time soon.

Louie