Show suggestions only when search is opened

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Show suggestions only when search is opened

This topic contains 5 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 1 month, 4 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #40356
    Heizpad
    Heizpad
    Participant

    Hi there!

    Currently the suggestions appear beneath the search field (like on your example website “Try these: example elementor woocommerce blog”). Is it possible to make them appear inside the popup when you start a search. So not on initial load but only when you click inside the search bar?

    Thank you

    #40365
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi,

    Well, there is no option to do that, but it might be doable via some custom code. Basically the initial opacity of the phrases container would be set to 0 (invisible) via custom CSS, then a javascript removes that once the input is focused.

    Apply this code to your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

    p[id*=asp-try-] {
        opacity: 0;
    }

    Try adding this code to the functions.php file in your theme/child theme directory – make sure to have a full server back-up first for safety. For more details you can check the safe coding guidelines.

    add_action('wp_footer', 'asp_footer_custom_script', 999999);
    function asp_footer_custom_script() {
    	?>
    	<script>
    	jQuery(function($){
    		$('input.orig').on('focus', function(){
    				$('p.asp-try').css('opacity', 1);
    		});
    	});
    	</script>
    	<?php
    }

    I believe this is as close as it gets.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #40368
    Heizpad
    Heizpad
    Participant

    Hi again!

    Thank you, I really appreciate your efforts here. However, when the input field is out of focus again the suggestions still stay there. Is it possible to remove them again once the user is out of focus?

    Thank you

    #40385
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    That should be doable too. Please use this instead of the second suggested code:

    add_action('wp_footer', 'asp_footer_custom_script', 999999);
    function asp_footer_custom_script() {
    	?>
    	<script>
    	jQuery(function($){
    		$('input.orig').on('focus', function(){
    			$('p.asp-try').css('opacity', 1);	
    		}).on('blur', function(){
    			$('p.asp-try').css('opacity', 0);
    		});
    	});
    	</script>
    	<?php
    }

    This will restore the invisibility too, when the input gets out of focus.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


    #40394
    Heizpad
    Heizpad
    Participant

    Works perfectly without any issues so far, thank you very much again!

    #40403
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.