javascripthtmlcsstwitter-bootstrap

How to enable dropdown on searchbox in bootstrap

I am designing searchBox which has a select(dropdown) at the right side but when I press on dropdown nothing happens means that I don't see dropdown list items, I don't know why is not listening to onclick. please help me.

I want to do something like this but combo box does not work: Search box with dropdown

My code:

    <html>
     <head>
      <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../css/bootstrap.css">
     <link rel="stylesheet" href="../css/main.css">
     <link rel="stylesheet" href="../css/bootstrap.min.css">
    </head>
    <body>
     <div class="container">
      <div class="row">
     <div class="col-lg-6">
     <div class="input-group">
   <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-      toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span    class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
    </div><!-- /btn-group -->
    <input type="text" class="form-control" aria-label="...">
  </div><!-- /input-group -->
 </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-   toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span     class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
         <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
     </ul>
    </div>
    </div>
  </div>
</div>
</div>
 <script type="text/javascript" src="../js/bootstrap.min.js"></script>
 <script type="text/javascript" src="../js/bootstrap.js"></script>
 </body>
   </html>
Solution

  • Hello You are not identifying the class at the first place by writing 

     <button type="button" class="btn btn-default ></button>

    refer the the class name first it will work something like this 

     <button class="btn btn-default type="button"></button>

    use this dropdown code 

      <div class="dropdown">
  <button class="btn btn btn-default dropdown-toggle" type="button" data- 
  toggle="dropdown">Action
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
  <li><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 </ul>
 </div>

    and for the Whole Work details Check the below Fiddle I updated Your Work

    DropDown Fiddle Demo