0

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.

thanksd
  • 54,176
  • 22
  • 157
  • 150
Renuz
  • 1,587
  • 7
  • 21
  • 34
  • put something after #Laptop and access in DOM ready with window.location.hash and set it to search text. – Parth Trivedi Dec 15 '15 at 16:52
  • SO is a question and answer site, we do not do your work for you. Please show us what javascript code you actually have. If your question is about html instead, please clarify. – randomusername Dec 15 '15 at 16:55
  • @randomusername So, I actually Don't have any idea how to achieve what I am trying to do. I have looked online for a while and cannot find if its JS, Jquery or HTML, that i need to be using in order to achieve this. This is a way for me to get a step in the right direction, since I have none at the moment. This is just one of the ways that ive seen people do similar task – Renuz Dec 15 '15 at 17:18

1 Answers1

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

Community
  • 1
  • 1
Enjoyted
  • 1,131
  • 6
  • 15
  • So what exactly does the "product.html?name=desktops" do? This is just a GET method for product to call? Can you link external information on the topic so I can research it? – Renuz Dec 15 '15 at 17:17
  • it just sends GET variable(s) (in this case, name, the name of the "product" wanted (desktops, laptops....)) to the product.html page. the url will then look like this : "product.html?name=theClickedProduct". now in this product.html page, you can, using javascript (see link inside the post) get this "name" parameter, and then fill your search input with that value! I hardly can explain it better. – Enjoyted Dec 16 '15 at 08:41