Watermark text in the search field

Hi,

thanks for your question, and sorry for the trouble.

I think what you mean is not called “watermark”, but “placeholder“. Do you mean that?

Then, your best chance for adding one should be to use some custom JavaScript code, as there’s no built-in method currently in the DataTables JS library that creates the search field above a table.

Regards,
Tobias

Hey,

Thanks!

I found some JavaScript code on the topic. Can you give me a hint in which library I have to include it?

Cheers,
Andrey

Hi,

you should not include it into a library, but into a small new plugin where you hook into one of the TablePress filter hooks to modify the JS call.

Another option would be to simply put it into your theme’s “footer.php” file, below the wp_footer(); call. You’ll of course have to adjust the CSS class that is used to target the search field in the JS code.

Regards,
Tobias

Hi Tobias and Andrey,

Did you find out what was the best solution for this? My site is https://housenkid.com/houston/ and I also would like to have the text “Search” added as placeholder in search box. Since this runs on php, where would be a good place to add it.

I am a newbie to this and would appreciate the support. Thanks.

Hi,

it’s really not much JavaScript code, as you can see here:
https://datatables.net/forums/discussion/7616/adding-placeholder-to-the-filter-text-input/p1

Regards,
Tobias

Hi Tobias,

Where do I put this javascript to get this to work. I am not too good at this. Here is the javascript that I need to add.

$(‘.dataTables_filter input’).attr(“placeholder”, “enter seach terms here”);

I can imagine it going in tablepress-database-column-filter-wdigets/js/ColumnFilterWidgets.js

Please help. Thanks

Hi,

that’s exactly the problem ?? Putting it in that JavaScript file will not help.
Instead, you could create a small TablePress Extension with it, similar to the existing ones on the TablePress website.

Another way would be to combine it with some timing code, to make sure that the code is only executed after the DataTables functions have been evaluated. To do that, you could then simply put this below the table Shortcode on the desired page:

<script>
jQuery(document).ready( function($) {
  setTimeout( function() { $('.dataTables_filter input').attr('placeholder', 'Search...'); }, 500);
} );
</script>

Regards,
Tobias

Hi,

I just found and even better way ?? It should actually be enough to add this line of code to the “Custom Commands” textfield on the “Edit” screen of the table:

"fnInitComplete": function() { $('.dataTables_filter input').attr('placeholder', 'Search...'); }

Regards,
Tobias

Tobias,

You really rock man! I just used the code above and added it on the bottom of the page. Works like a charm! Thank you so much. You can see the end results at housenkid.com.

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Tobias,

You are right, adding the code you gave me to “Custom Commands” textfield on the “edit” screen of the table is a better way to do it. I love it. Thank you!

Hi,

yes, that’s an even better solution as it does not rely on a time delay as the first solution does.

Regards,
Tobias

Hey guys,

that is indeed fantastic ?? Thanks for the solution.

I have a different question though: How do I input two commands in the custom commands line?

I already had one to hide certain columns and when i added the above command for the placeholder, the table doesnt load properly (search field and filters are gone)

Cheers,
Andrey

Hi Andrey,

just put both commands in the field, separated by a comma ,.

Regards,
Tobias

As other people say in the forums: it worked like a charm ??

Thumbs up, Tobias!

The best-maintained WP plugin I have seen so far!

Cheers,
Andrey