在 URL 搜索中传递参数答案

【问题标题】：Passing Parameter in URL search在 URL 搜索中传递参数
【发布时间】：2015-07-05 23:34:29
【问题描述】：

我正在创建搜索功能。请参阅UI example。以下是我的 HTML

  <form class="navbar-form" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
    <button type="submit" class="btn"><span class="glyphicon glyphicon-search"></span> Search</button>
    <a class="btn" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    <span class="glyphicon glyphicon-menu-hamburger"></span> Filter
  </a>
  </form>

当点击搜索按钮时，输入的任何词都需要通过 JS 脚本传入 URL 中，以便转到另一个页面并显示结果。

任何帮助将不胜感激

谢谢

【问题讨论】：

标签： javascript search parameter-passing

【解决方案1】：

将action 和method 属性添加到form 标记。以及name 标记的name 属性。

这将转到 URL：search.php?term=value

<form action="search.php" method="GET" class="navbar-form" role="search">
    <div class="form-group">
        <input type="text" name="term" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-anz"><span class="glyphicon glyphicon-search"></span> Search</button>
    <a class="btn btn-anz" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        <span class="glyphicon glyphicon-menu-hamburger"></span> Filter
    </a>
</form>

【讨论】：

非常感谢......所以我需要做的就是用我的结果页面 URL 替换“search.php”。关于 JS，JS Code 之类的就足够了吗？
我不擅长 vanilla JS，但看起来还不错。如果您认为其中一个答案对您的解决方案有帮助，请接受它作为您的答案。

【解决方案2】：

你必须在 from 标签中添加方法和动作属性。

像这样-

<form action="search.php" method="GET" class="navbar-form" role="search">
<div class="form-group">
    <input type="text" name="item" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-anz"><span class="glyphicon glyphicon-search"></span> Search</button>
<a class="btn btn-anz" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    <span class="glyphicon glyphicon-menu-hamburger"></span> Filter
</a>

然后使用 javascriupt，您可以使用适当的技术来检索值并处理搜索结果。

【讨论】：