javascriptjquerysearchmmenu

mmenu search to trigger website (global) search

I was wondering if it's possible for the search in mmenu to trigger a website search rather than just return items within the menu?

The results don't need to display in the menu but pressing enter or clicking/tapping the search button would submit the global website search and redirect to /search.

Is this possible? I'm sure I've seen it somewhere but I can't find where. I imagine some jQuery would be needed to change the function of a submit button?

I'm not sure if it's important but this will be on a Shopify website and there is a search form in the header marked up like this:

<form action="/search" method="get" role="search" class="search"> 
    <input type="search" 
           name="q" 
           id="Search" 
           class="text-input search__input" 
           value="" 
           placeholder="Search"> 
    <button type="submit" class="search__btn"> 
        <svg class="icon icon--search"><use xlink:href="#icon-search"></use></svg>  
    </button> 
 </form>
Solution

  • Couple of scenarios here

    When page reload is allowed

    This is the simplest scenario, if page reload is allowed your form will be submitted to search?q=some search, which should be a valid route for server you can then fetch the results based ?q=some search and render them on your front end

    When page reload is not allowed

    This can be comparatively bit trickier and implementation will depend on the frontend framework you are working on but rough implementation will be something like