javascript - 如何获得链接到新页面的按钮，并预先填充搜索栏

Question

这是一个 Bootstrap 下拉菜单。我希望每个按钮都链接到 Product.html 页面。在该页面上，我们使用 Angular JS 搜索栏。我希望搜索栏预先填充按钮的名称或我可以输入的单词。我没有使用太多 Javascript 或 jquery。

<ul class="nav navbar-nav navbar-left">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Desktops</a></li>
      <li><a href="#">Laptops</a></li>
      <li><a href="#">Tablets</a></li>
      <li><a href="#">Core Components</a></li>
      <li><a href="#">Power Supply</a></li>
      <li><a href="#">Hard Drive</a></li>
      <li><a href="#">Peripherals</a></li>
    </ul>
  </li>
</ul>

这是在product.html页面上搜索或输入。

Search: <input ng-model="query" id = "query" />

我知道我需要包括，并且 <script> “这里有东西”</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

我还需要托管网站才能使这些调用正常工作吗？现在我只在本地机器上进行测试。

Answer 1

我希望我正确理解了您的需求。我想到的第一种方法是将 GET 参数附加到 url (products.html) 并将它们返回到所谓的页面中。

它看起来像:

  <ul class="nav navbar-nav navbar-left">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products<span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="product.html?name=Desktops">Desktops</a></li>
        <li><a href="product.html?name=Laptops">Laptops</a></li>
        <li><a href="product.html?name=Tablets">Tablets</a></li>
      </ul>
    </li>
  </ul>

然后在product.html页面上，您需要捕获这个GET参数，为此我建议您使用there看看你如何做到这一点。

捕获到“name”后，您将使用该参数填充搜索字段，然后继续执行您的逻辑