Keeping the focus on the  JQuery Search Box

Bob Schneider
Bob Schneider used Ask the Experts™
on
Is there any way to assign the Search box on a JQuery/JSON/DataTable page the focus?  I want the page below to have the search box keep the focus so end users viewing their results can just step up and enter their bib number to view their results.  Thanks!

https://www.gopherstateevents.com/results/fitness_events/digital_results.asp?event_id=811&race_id=1404
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014
Commented:
Use : jQuery("#results_filter input").focus();
Bob SchneiderCo-Owner

Author

Commented:
Does that go in a script tag?
Multitechnician
Top Expert 2014
Commented:
of course and you should put this code just after your datatable is created

<script>
jQuery(window).on("load", function() { // wait for all elements loaded in the page
    setTimeout(function() {
         jQuery("#results_filter input").focus();
     , 1000); // wait 1 second before setting focus on the textbox
});
</script>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I would build on the DT draw event
You don't have an id on the search so using this approach

var inp = $('#results_filter input');
$('#results').on( 'draw.dt', function () {
  inp.focus();
} );

Open in new window

Bob SchneiderCo-Owner

Author

Commented:
Thank you both so much!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial