Show suggestions only when search is opened

[HeizpadParticipant]

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

[Ernest MarcinkoKeymaster]

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 :)

[HeizpadParticipant]

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

[Ernest MarcinkoKeymaster]

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 :)

[HeizpadParticipant]

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

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts