Search WP Ajax Live Search

Hi there,

Is this what you are looking for?
https://generatepress.com/forums/topic/searchwp-live-search/

Hi Leo, I did read that and used the snippet provided by Tom, but it did not seem to do anything? The post is from 2017 so I kind of assumed it is probably out of date?

thanks
Sam

Hi there,

can you enable the SearchWP Live Ajax Search plugin.
And add the code Tom provided. Then let us know so we can take a look at why its not working.

Sure, it is done. Please let me know what you find.

I cannot see the changes that function should make.
Have you added any other filter functions for changing its behaviour such as these:

https://docs.generatepress.com/article/generate_navigation_search_output/#woocommerce-products

If so can you remove them and then let us know.

Ah yes, there is another snippet (see below) which fixes the issue of Woo results being returned as regular post results. Is there a way to combine the two snippets?

Also with the autofill results you have to click on them twice to go to the page, that seems strange, can you advise on why that would be?

add_filter( 'generate_navigation_search_output', 'tu_remove_search_query' );
function tu_remove_search_query() {
	printf( // WPCS: XSS ok, sanitization ok.
		'<form method="get" class="search-form navigation-search" action="%1$s">
			<input type="search" class="search-field" value="" name="s" title="%2$s" />
                        <input type="hidden" name="post_type" value="product" />
		</form>',
		esc_url( home_url( '/' ) ),
		esc_attr_x( 'Search', 'label', 'generatepress' )
	);
}

NB

It also fixes the issue of clearing the search field, if you do a search and then a second search from the results page.

OK I think I got it, I added data-swplive="true" to the input form.

So now the original fix would be:

add_filter( 'generate_navigation_search_output', 'tu_remove_search_query' );
function tu_remove_search_query() {
	printf( // WPCS: XSS ok, sanitization ok.
		'<form method="get" class="search-form navigation-search" action="%1$s">
			<input type="search" class="search-field" value="" name="s" title="%2$s" data-swplive="true" />
                        <input type="hidden" name="post_type" value="product" />
		</form>',
		esc_url( home_url( '/' ) ),
		esc_attr_x( 'Search', 'label', 'generatepress' )
	);
}

Still no idea why you have to click a result twice though... ?

thanks

Hi there,

That's because of this issue: https://generatepress.com/forums/topic/live-search-results-links-broken-in-primary-nav/#post-1311543

Hi Tom, thanks, I see.

Can you advise where I would add this code that has been suggested?

Hi Tom, I think I may have an alternative workaround.

SearchWP offer another extension to their plugin that provides a lightweight modal search box: https://searchwp.com/extensions/modal-form/

So I was thinking, instead of messing with the code, is it possible to change the behaviour of the magnifying glass button in the navbar so it launches this modal? The plugin has the functionality to add it as a menu item, but then it ends up in the slide-out menu on mobile, so I thought if you can change the behaviour of the search button to execute their shortcode or they have a function that can be called using the functions.php... could it would be an easy solution?

What do you think, could that work?

Hi there,

Do they offer instructions on how to add your own toggle? If so, it should be easy enough to hook it into the navigation/mobile navigation using hooks :)

Hi Tom, they advise how to add a button to launch the modal, is that what you mean?

As a Menu Item: https://searchwp.com/extensions/modal-form/#menu-item
Using a Shortcode: https://searchwp.com/extensions/modal-form/#shortcode
As a Gutenberg Block: https://searchwp.com/extensions/modal-form/#block
Within your template(s) programmatically (code): https://searchwp.com/extensions/modal-form/#code\

Can you use any of these methods?

thanks

You could:

1. Add the menu item, then hide it on mobile.
2. Add a new Hook Element to the generate_inside_navigation hook:

<div class="mobile-bar-items">
    <?php searchwp_modal_form_trigger(); ?>
</div>

Then make sure to "Execute PHP" and set your Display Rules.

Let me know if you need more info :)