Give focus to search box upon magnifying glass click

BB Theme
1

In my BB theme, when I click on the magnifying glass in the menu, it brings up a search box (as expected). Then I have to click again in the search box to give the focus to the text input area.

How can I remove the need for that extra click and automatically give the focus to the search box’s text input area upon clicking on the magnifying glass? Then my visitors could just click on the magnifying glass and type their search terms without the need for the extra click in the text area.

2

Hi Steve,

Brought this to the attention of our devs and they’re going to add this to the theme. As it was such a nice little idea.

To get this working now, add the following code to Customizer > Code > JavaScript Code.

jQuery('.fl-page-nav-search a.fa-search').on('click', function(){
    jQuery('.fl-search-input').focus();
});

Thanks,
Danny

3

That code looks correct to me, I can see that it’s being added to the pages when I view the source, and it looks like it’s targeting the correct elements, but in multiple browsers it’s having no effect.

Any ideas?

4

Thanks Danny,
That is great news - this has been a slight annoyance of mine too…
Looking forward to it.
Dave

ps - Like Steve, not seeing this JS work for me!

5

Hi Steve & Dave,

Can you try this code, please.

jQuery( function(){
    setTimeout(function(){
        jQuery('.fl-page-nav-search a.fa-search').on('click', function(){
            jQuery('.fl-search-input').focus();
        });
    }, 1000);
} );

Thanks,
Danny

6

Yup… still no effect.

7

I suspect the element targeting is where the problem may be. If I add an alert() or console.log() call inside the click-activated function, they don’t trigger, but if I just insert them as solo calls outside of any element targeting, they work. So I think the function inside the on-click isn’t getting triggered.

8

Hi Steve,

Is it possible for you to provide temp admin access to your site, please? As, the code I posted above is working on my end.

Thanks,
Danny

9

I’d love to give you access, but the site is running on a private server only right now, so it’s not accessible via the web yet.

10

Thanks Danny,
Yes that worked for me…
Steve one thing to watch, copying and pasting from here will sometimes mess up the code.
Copy into a plan text editor first to preserver the code.
This is what it can look like when it does not copy/paste correctly…

jQuery( function(){
    setTimeout(function(){
        jQuery('.fl-page-nav-search a.fa-search').on('click', function(){
            jQuery('.fl-search-input').focus();
        });
    }, 1000);
} );

Cheers, Dave

Update, this paste worked because I used the code tags here, but essentially the single quotes get switched to &#039 (colon removed!) and other characters change too…

11

The code pasted correctly.

I thought that maybe 1000ms wasn’t enough time, so I tried changing it to 5000ms, and it worked.

Then I changed it back to 1000ms, and it continued working. Then I tried 100ms, and that works too. I’m not sure how or why this made a difference, but at least it seems to be working now. Maybe the fact that I was running the javascript console while testing the previous version was causing an issue somehow.

One oddity with this implementation is that if you click on the magnifying glass a second time after the search box is visible, the word “Search” briefly flashes in the text input area before it disappears. I think that could be fixed by removing value=“Search” from the input element.

12

Happy to hear the code is now working.

@Steve - That may have been the cause, as I had no issue using the code when I tested it before posting.

Thanks,
Danny