Autofocus Dropdown Search

[fransboumans]

Hi there!

I have a header that uses a dropdown search. Is it possible that when the user clicks to open the dropdown, it auto focuses on the inputfield? So that the user can start typing right away without clicking on it once again. Feels like this should be an option on this element.

[ruenel]

Hello @fransboumans,

Thanks for writing in!

The search element directs the focus to the search box as what you have in mind. You can test this in your site.
As soon as you click the search icon, the search modal pops up and the the cursor blinks waiting for a keyword entry.

Hope this helps.

[fransboumans]

That’s true, but this is not the case with a drop down search element. I’m trying this on a offline server where I’m trying to create a new header.

[lely]

Hi @fransboumans,

Try adding an ID on the element like for example custom-search-dd
Then add this JS on custom JS for the header:

jQuery ( document ).ready ( function($) {

$('#custom-search-dd-anchor-toggle').click(function(){ 
  setTimeout(function(){
   $('#custom-search-dd-dropdown .x-search-input').filter(':visible').focus();
}, 500);

      
});
});

Hope this helps.

[fransboumans]

That did the job. Thank you very much!

[Prasant]

You are most welcome.