How to autofocus on table “Search” field?

Hi,

thanks for your post, and sorry for the trouble.

This input field is generated on the fly by the JavaScript code of the DataTables JS library. I’m not sure if it is possible to modify this to add the autofocus attribute.
A quicker approach might be to add some custom JavaScript code on the page, that focusses the field using JavaScript code, like

<script>
setTimeout( function() { 
  jQuery( '#tablepres-123_filter input').focus();
}, 500 );
</script>

Regards,
Tobias

Tobias, thank you for the quick reply. I added the code to the theme’s functions.php and see in the source that it is being called but still no autofocus on the search input field. You can see it at https://egpu.io/external-gpu-implementations-table/ .

Any other ideas?

Hi,

two things: First, I made a typo, it has to be tablepress- and not tablepres-. Second thing is that you’ll have to adjust the table ID to the correct one (123 is just an example). So, that line has to be changed to

jQuery( '#tablepress-2_filter input').focus();

here.

Regards,
Tobias

@tobias, worked brilliantly. A small but significant change to the user experience in engaging with the Tablepress tables.

For other readers, the fix was to add the following code to the WP theme’s functions.pho file. Ensure you change the #tablepress-2 text to match the Table ID you wish this to operate on.

———-
add_action( ‘wp_footer’, ‘asl_focus_on_load’);

function asl_focus_on_load() {
?>
<script>
setTimeout( function() {
jQuery( ‘#tablepress-2_filter input’).focus();
}, 500 );
</script>
<?php
}
—————

I am surprised this request hasn’t come up previously as a support question. Perhaps consider adding it as an option to the next version of Tablepress?

Thank you for your assistance ??

• This reply was modified 7 years, 9 months ago by nando4.

Hi,

great! Good to hear that this works now!

Now, I would however recommend to not add this to every page of your site using the wp_footer action hook. Instead just paste the <script> HTML code into the page content, under the corresponding table Shortcode. That way, it’s only loaded on the page where it’s actually needed.

Regards,
Tobias

Tobias, thank you for the followup. I’ve removed the code from functions.php and added it under the table shortcode. The problem now is it no longer works.

Would you mind perusing the site/code and advising if it’s done correctly? I even increased the delay from 500ms to 1000ms just in case it was too short but it didn’t help here.

Here’s the tablepress table with search input field:
https://egpu.io/external-gpu-implementations-table/

Hi,

it looks like something is messing with the quotation marks here.
If you use “View Source” in the browser, you will see that they are appearing as ‘ and not as '.
Could you maybe check again what’s posted inside the editor there? (I recommend using the “Text” and not the “Visual” editor for this.)

Regards,
Tobias

Changing ‘ to ‘ was indeed the fix. Works very well now. Thank you for your help on this one Tobias.

• This reply was modified 7 years, 9 months ago by nando4.
• This reply was modified 7 years, 9 months ago by nando4.

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!

I’ve added a great rating for your super product and support ??

Hi,

thanks, I really appreciate that!

Regards,
Tobias