autofocus for search bar

Hi,

So, as I understand, you need to set autofocus for the search fields that is appears inside the lightbox.

You can do this with the following custom code:

add_action( 'wp_head', 'aws_autofocus' );
function aws_autofocus() { ?>

    <script>

        window.addEventListener('load', function() {

            var iconSearch = document.querySelectorAll('a[href="#search-lightbox"]');
            if ( iconSearch ) {
                for (var i = 0; i < iconSearch.length; i++) {
                    iconSearch[i].addEventListener('click', function() {
                        window.setTimeout(function(){
                            document.querySelector("#search-lightbox .aws-container .aws-search-field").focus();
                            jQuery( '.aws-search-result' ).hide();
                        }, 200);
                    }, false);
                }
            }

        }, false);

    </script>

<?php }

You need to add it somewhere outside the plugins folder. For example, inside functions.php file of your theme or use some plugin for adding code snippets.

Regards

Thank you very much! This has worked wonderfully!

hello,

I have the same requirement for my web, I need the autofocus in the search box so no need to click in to type. I have tried the custom code previously written in this post, with no luck. I’m running my web with Divi (currently under construction) and all the snippets added with a plugin.

Any ideas?

thank you in advance, awesome plugin

@coritah44

Can you please give me the link to the page with that search form?

The web is not public yet, but I have enabled a text module with the plugin shortcode

my web

thank you!

• This reply was modified 3 years, 1 month ago by Anonymous User 20092453.

So on your site the search box will be visible as like on your example page or it will appear only by clicking on the search icon?

The idea is to show the search box in a pop up when an icon is clicked. I have set a quick example again in my site, if you are so kind to check it again, you′ll find the search icon in the top right, thank you again

@coritah44

Please try to use this code:

add_action( 'wp_head', 'aws_autofocus' );
function aws_autofocus() { ?>

    <script>

        window.addEventListener('load', function() {

            var iconSearch = document.querySelectorAll('a[data-id="searchbox"]');
            if ( iconSearch ) {
                for (var i = 0; i < iconSearch.length; i++) {
                    iconSearch[i].addEventListener('click', function() {
                        window.setTimeout(function(){
                            document.querySelector("#searchbox .aws-container .aws-search-field").focus();
                            jQuery( '.aws-search-result' ).hide();
                        }, 200);
                    }, false);
                }
            }

        }, false);

    </script>

<?php }

wow! really appreciated. it works perfectly, Спасибо.

my last question is if it’s now possible to put a placeholder text in the aufocused search box.

In fact I already see the placeholder text ‘Search’ there.

I don′t, but I’ll try to figure it out.
Thank you for all your help.

Hi,

I have noticed another problem with autofocus. On the mobile version, unfortunately, the autofocus still does not work.

Thanks a lot

See my message before this:

Hello, could you please help me with the same issue?

Here is the link for the website:https://www.biooazazdravlja.hr/

Thank you ??

@plavipix

Please try this code:

add_action('wp_head', 'aws_wp_head');
function aws_wp_head() { ?>
    <script>
        window.addEventListener('load', function() {

            var awsSearch = document.querySelectorAll(".oxy-header-container .open--search");
            if ( awsSearch ) {
                for (var i = 0; i < awsSearch.length; i++) {
                    awsSearch[i].addEventListener('click', function() {
                        window.setTimeout(function(){
                              jQuery(".header__search .search--input .aws-search-field").focus();
                            jQuery( '.aws-search-result' ).hide();
                        }, 100);
                    }, false);
                }
            }

        }, false);
    </script>
<?php }