Two columns suggestions

?ts so good ? hoope ?ts come ?n new vers?on

I hope such features come too.

https://ibb.co/kSNqK6f
https://ibb.co/C5z8Nv2

*Popular queries

*Top queries

Hi @foxinbox!

This is the best solution I can suggest. This code will split the autocomplete results into 2 columns. However, it has a small drawback – it delays 250ms after loading the results, which is why the layout is defaulted initially. Please check it out and let me know if this solution is good.

add_action( 'wp_footer', function() { ?>
	<style type="text/css">
		.dgwt-wcas-suggestions-wrapp {
			display: flex !important;
			flex-wrap: wrap;
		}

		.suggestions-wrapper {
			width: 50% !important;
		}
	</style>
	<script type="text/javascript">
		jQuery(document).on('fibosearch/show-suggestions', function() {
			setTimeout(function() {
				jQuery(document).ready(function() {
					let headlines = jQuery('.dgwt-wcas-suggestion-headline').length;
					
					if ( headlines > 0 ) {
						jQuery('.dgwt-wcas-suggestion-headline').each(function() {
							let id = jQuery(this).text().toLowerCase().replace(/\s+/g, '-');
							jQuery('.dgwt-wcas-suggestions-wrapp').append('<div id="w-' + id + '" class="suggestions-wrapper">');
							
							if (jQuery(this).text() == 'Products') {
								jQuery(this).appendTo('#w-products');
							} else {
								jQuery(this).appendTo('#w-categories');
							}
						});
						
						jQuery('.dgwt-wcas-suggestion:not(.dgwt-wcas-suggestion-headline)').each(function() {
							if (jQuery(this).hasClass('dgwt-wcas-suggestion-product')) {
								jQuery(this).appendTo('#w-products');
							} else {
								jQuery(this).appendTo('#w-categories');
							}
						});
					}
				});
			}, 250);
		});
	</script>
<?php }, 999 );

You have two ways to add this code to your theme:

1. Open the functions.php in your child theme and add the code at the end.
2.  or install the Code Snippets plugin and apply this code as a snippet.

Regards,
Kris

Thanks for code, but it’s not working.
After entering the code, it created a second list with suggestions – identical to the first one, but it couldn’t be turned off (stays all the time on screen). What’s more, it wasn’t divided in half ??

Hi @foxinbox!

Please try this improved code:

add_action( 'wp_footer', function() { ?>
	<style type="text/css">
		.dgwt-wcas-open .dgwt-wcas-suggestions-wrapp {
			display: flex !important;
			flex-wrap: wrap;
		}

		.dgwt-wcas-open .suggestions-wrapper {
			width: 50% !important;
		}
	</style>
	<script type="text/javascript">
		jQuery(document).on('fibosearch/show-suggestions', function() {
			setTimeout(function() {
				jQuery(document).ready(function() {
					let headlines = jQuery('.dgwt-wcas-suggestion-headline').length;
					
					if ( headlines > 0 ) {
						jQuery('.dgwt-wcas-suggestion-headline').each(function() {
							let id = jQuery(this).text().toLowerCase().replace(/\s+/g, '-');
							jQuery('.dgwt-wcas-suggestions-wrapp').append('<div id="w-' + id + '" class="suggestions-wrapper">');
							
							if (jQuery(this).text() == 'Products') {
								jQuery(this).appendTo('#w-products');
							} else {
								jQuery(this).appendTo('#w-categories');
							}
						});
						
						jQuery('.dgwt-wcas-suggestion:not(.dgwt-wcas-suggestion-headline)').each(function() {
							if (jQuery(this).hasClass('dgwt-wcas-suggestion-product')) {
								jQuery(this).appendTo('#w-products');
							} else {
								jQuery(this).appendTo('#w-categories');
							}
						});
					}
				});
			}, 250);
		});
	</script>
<?php }, 9999 );

Regards,
Kris

Thanks, but still not working ??
Maybe i’ll provide a link to page for this?

Regards!

Hi?@foxinbox!

This would certainly be very helpful. Alternatively, can you post screenshots of what your autocomplete looks like after implementing this code?

Regards,
Kris

Here’s a link:
https://imgur.com/a/0p3qTe6

1 photo – without code
2 photo – with code

So, as can you see – nothing really changed ??

Hi @foxinbox!

Please do these 3 more things:

1. Make sure the code has been implemented in your theme. Once on your website, click F12 and go to the Elements tab. Then use the CTRL + F shortcut to search for the phrase ‘#w-categories’, for example. If it appears, it means that the code is implemented correctly. See this screenshot for help: https://prnt.sc/4nyOj9R8Fmvb
2. Then go to the console tab and check if there are any errors there. If you find anything, let me know.
   See this screenshot for help: https://prnt.sc/NUnTAhfZ0SfA
3. In my code, in the if snippet (jQuery(this).text() == ‘Products’), change Products to PRODUKTY. Exactly as it is in your label in autocomplete.

Regards,
Kris