How to get Cursor to Auto-Focus into Input Field in Ajax lite using Oxygen Builder

Well, this was insanely way harder than I expected because my javascript skills had faltered badly. So, hopefully you can use this guide here and save yourself many many weeks of pain.

Assumptions

This tutorial assumes the following:

1. You are using Oxygen builder environment in WordPress
2. You have ajax search lite plugin integrated into your website
3. You are experiencing that when you click the search icon (ie. magnifying glass) and the ajax search lite modal pops up that it does not focus the users mouse into (ie. they have to click first instead of just search)

First, you’ll need to know exactly what the CSS ID is for the thing that’s being clicked. You can do this with a right click and an ‘inspect’ move in any browser. In my case, Oxygen builder had given it an ID of ‘id=svg-fancy_icon-371-57’.

Here is the code that you’ll need, keep this handy first:

jQuery(function($){
    $('#svg-fancy_icon-371-57').on('click', function(){
        setTimeout(function() {$('input.orig').focus();}, 1000);
    });
})

Special thanks to you folks on this forum from which I was able to derive a solution that worked with Oxygen.

What to do

1. Open up your ‘structure’ in Oxygen builder
2. Select your ajax search lite ‘shortcode’ object (assuming you set it up via short code in Oxygen)
3. Click the advanced tab
4. Click the javascript menu item
5. In the code block, paste in the above code, changing the svg-fancy_icon-371-57 part to whatever your ID is in your setup for your clickable item that opens the search
6. Click “Apply code” button
7. Click save button (in Oxygen) to save changes
8. Test on front end with a control F5 button to make sure the cache is cleared and you’re getting a real experience of new user.

Now when you click your search thing it should auto-focus the cursor to the search field allowing you to simply search as expected.

Note: For some reason apparently WordPress (and therefore Woo Commerce, too) you can’t write the usual dollar sign $ to represent ‘jQuery’ and instead have to write it out in full. That’s how I modified the code above. Gleaned from this video in case you’re interested.

Hope this helps!