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

Question

So this is a bootstrap drop down menu. I want each button to link to a Product.html page. On that page weare using an Angular JS search bar. I want that search bar to be prefilled with the name of the button, or a word i can type in. I haven't used much of Javascript or 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>

This is the search, or input on the product.html page.

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

I know I need to include, and <script> "something here" </script>

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

Also do I need to host the website for these calls to work? Right now im only testing on a local machine.

Answer 1

I hope I understood your need correctly. The first way that comes up in my mind would be to append GET parameter to the urls (products.html) and get them back in the so called page.

It would look like :

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

and then on the product.html page, you would need to catch this GET parameter back, for that I would suggest you head there to see how you could do it.

The ' name ' caught, you would then populate the search field with that parameter and then keep on with your logic