Data Table input type as text instead of search

Question

I have a system that populate data table using CakePHP and the amazing part is

its search field was something like this

<input type="text" aria-controls="c_table">

And the date table i populate was

<input type="search" class="" placeholder="" aria-controls="c_table">

How do I change my own populated data table search bar as input type "text" instead of "search"

var dt = $('#clients_table').DataTable( {
        "processing": true,
        "serverSide": true,
"oLanguage": {
"sSearch": "Search"},
"sDom": '<"top"f>irt<"bottom"lp><"clear">'

Above is part of my data table declaration but I think that does not affect the search bar to be search instead of text, I wonder how cake PHP actually change the search as text for data table.

Thanks for helping

You may want to rephrase your question, as it it a bit difficult to get to the core of your question. I understand you want to change the type of the search field generated by the DataTable library (by the way PHP is not at all involved in this process). I'd be very surprised if the library provided such a feature. You will probably need to customize the library. — RandomSeed
There is no practical difference in search vs text (at the moment, and search is in fact only supported by chrome and safari) - if you really need to change, simply change the type attribute in javascript or jQuery. — davidkonrad
@RandomSeed I want to change search to text type because of the look & feel of the property. — panda 2

davidkonrad davidkonrad · Accepted Answer · 2015-01-14T21:28:13

Oh, now I see where you are heading. You want to get rid of the ugly × when type=search on <input>'s in Chrome and Safari? Simply :

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

dataTables demo -> http://jsfiddle.net/Lwwv5jLe/

Data Table input type as text instead of search

1 Answers