[Support request] Search WP Ajax Live Search

[Sam]

Hi Tom, thanks for looking at this, really appreciate it. The first option doesn’t really work for me as I want the search on mobile as well, just not inside the menu.

Option 2 doesn’t seem to work, it almost looks like it puts the site inside the modal rather than adding the search trigger.

Is it at all possible to just apply the trigger to the search icon? Or at last, replace it with another icon that has this trigger.

Alternatively, the solution you mention above, that seems pretty simple to do but it edits the core code. So…

a) can it be done on a child theme? I had a look at the link to the github file and I can see where to add the code.
b) do you plan to add the compatibility to GP any time soon. Maybe I should just wait in case I break something on my site!

Thanks for your help so far.

Sam

[Tom]

You could ask SearchWP if it’s possible to trigger the modal using a custom element. If so, we can definitely look into doing that 🙂

[Sam]

Hi Tom, so the guys at SearchWP came back with the below, it makes little sense to me as I am not too good with JS.

Hi Sam,

you can add the Modal to your site using this code:

<?php
searchwp_modal_form_trigger( array(
‘echo’ => true, // Whether to echo
‘type’ => ‘link’, // Either ‘link’ or ‘button’
‘text’ => ”, // Text of the trigger
‘engine’ => ‘default’, // SearchWP engine (when applicable)
) );
?>

This will create a link without any text so it won’t be visible.
You can then trigger the modal to open by using JS like this:

jQuery(‘.searchwp-modal-form-trigger-el’)[0].click();

This would work only if there is a single modal in the page as it would open all modals in the page.

Also, I did also try the solution to fixing the issue with the javascript closing the navigation you provided above but it didn’t work.

Let me know what you think to this way?

thanks

[Tom]

That seems a little over-complicated.

Honestly, I would go with the solution here: https://generatepress.com/forums/topic/live-search-results-links-broken-in-primary-nav/#post-1311543

I know it involves adjusting core code, but I’ll be sure to add a solution in the next version so only one adjustment will be necessary (if that).

[Sam]

Hey tom, I am sorry I just can’t work it out, I did replace this line:
if ( document.querySelector( '.navigation-search.nav-search-active' ) && ! document.querySelector(".searchwp-live-search-results-showing") )

but it didn’t do anything, I then just deleted the if statement for the clicking anywhere outside the search form and that didn’t do anything either. I updated the minified file as well with the changed JS each time. I also tried disabling Autoptimize and cleared my site cache but not of that saw any change in behaviour.

Could it be cached in the browser or something or am I doing it wrong?

I don’t want to waste too much of your time trying to fix this for me so I am sorry about that. It’s annoying as there are a lot of search plugins out there and so many seem badly made. SearchWP actually seemed a bit more robust but maybe it is not to be for now.

thanks
Sam

[Tom]

It could be cached in the browser – try clearing your browser cache or using incognito mode.

[Sam]

Hi Tom, ok getting somewhere with this now! I cleared my browser, cdn, autoptimize and kinsta cache and that didn’t clear it and then it seemed to clear itself after a couple of hours. Can’t think of any other cache other than Chrome somehow.

Anyway, the above solution did sort it so if you could add support for this in GP that would be truly awesome! SearchWP does seem one of the best search plugins I must have spent days searching for a good one that isn’t buggy, so I imagine lots of people who use GP use it.

I also found this post on the GP forum that allowed the addition of a search submit button to the nav bar search overlay, which is perfect. I am surprised that this isn’t included as a GP setting to TBH as it makes the search field much better as some users don’t hit the enter key when searching and would be a great addition if possible.

I have one last question I hope you can help with… when adding that search submit button, is there a way to easily use the search icon (magnifying glass) rather than the text “Search”. I tried adding the FontAwesome code and it didn’t seem to work so I imagine you can’t do it that way.

Thanks again!
Sam

[Tom]

You could try this:

add_filter( 'generate_navigation_search_output', function() {
    printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" class="search-field" value="%2$s" name="s" title="%2$s">
            <button class="button">%4$s</button>
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ),
        generate_get_svg_icon( 'search' )
    );
} );

[Author]

Posts