搜索输入被发送到不同页面上的另一个搜索栏答案

【问题标题】：Search input gets sent to another search bar on a different page搜索输入被发送到不同页面上的另一个搜索栏
【发布时间】：2019-11-24 13:49:44
【问题描述】：

我正在尝试从我的主要网站搜索栏获取输入以发送到我的第二个网站的搜索栏，并显示第二个网站搜索的结果。

我已经尝试过一些几乎可以工作的代码，但是它没有搜索第二个站点，而是将搜索输入添加到 url。

       <div class="form-group">
          <form id="search-products" method="get">
            <input type="search" class="form-control input-thick-border" id="test" placeholder="Search..." name="keyword">
          </form>

          <script type="text/javascript">
            document.getElementById('search-products').onsubmit = function() {
              window.location = "http://website.com/Search" + document.getElementById('test').value;
              return false;
                }
            </script>

        </div>

因此，如果我在第一个搜索栏中键入“pen”，那么它将链接到不存在的“website/searchpen”，因此它会重定向到“未找到”页面。我觉得我很接近我只是缺少一些从第一个搜索栏中获取输入并在第二个搜索栏中搜索它的代码。任何帮助或想法将不胜感激。

【问题讨论】：

在搜索后添加“?query=”...这将使其成为您的其他网站可以解析的查询字符串参数
根据您在第二页上处理搜索的方式，您希望它是 Search?query=pen 或 Search/pen。在这两种情况下，您都必须相应地修复字符串连接。目前，您将“http..../Search”和“pen”放在一起，从而获得 website.com/searchpen。
谢谢！你们两个真是令人叹为观止！刚刚开始工作！我不得不使用关键字而不是查询（因为我假设“name = keyword”？）。

标签： javascript jquery html search

【解决方案1】：

您实际上并不需要 JavaScript。一个普通的表单提交正是您正在寻找的。只需设置表单操作即可。

<form method="get" action="https://example.com/search">
  <input type="search" name="keyword" />
</form>

在提交表单时，它会变成这样：

https://example.com/search?keyword=Whatever+the+user+typed+in

【讨论】：