mmenu 搜索触发网站（全局）搜索

Question

我想知道 mmenu 中的搜索是否可以触发网站搜索，而不仅仅是菜单中的 return 个项目？

结果不需要显示在菜单中，但按回车键或 clicking/tapping 搜索按钮将提交全球网站搜索并重定向到 /search。

这可能吗？我确定我在某个地方见过它，但我找不到。我想需要一些 jQuery 来更改提交按钮的功能？

我不确定它是否重要，但这将出现在 Shopify 网站上，header 中有一个搜索表单，标记如下：

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

Answer 1

这里有几个场景

允许重新加载页面时

这是最简单的情况，如果允许重新加载页面，您的表单将提交到 search?q=some search，这应该是服务器的有效路由，然后您可以根据 ?q=some search 获取结果并呈现他们在你的前端

不允许重新加载页面

这可能比较棘手，实现将取决于您正在使用的前端框架，但粗略的实现类似于

您将 onFormSubmit 事件绑定到您的表单
提交表单时，您将阻止表单提交并读取 q 参数
您将通过使用参数 q

/search

负责/search的component/page将发起搜索结果请求

mmenu 搜索触发网站（全局）搜索

mmenu search to trigger website (global) search

javascript

jquery

search

mmenu