bootstrap input group select field,text field and search field - html

Question

I want to build search bar similar to amazon site.
A select input field followed by input field followed by search button.
this is what I have got so far:
The issue is that the button1 dropdown is not a select input field if I do change to input field everything breaks.
examples in bootstrap site dont show group with input field select but dropdown menu.
my code
<div class="input-group input-group-lg">
<input type="text" name="query" class="form-control" placeholder="Search this site" />
<span class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
css - to remove curve radius for center input field or buttons
.custom{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}

Answer 1

Please have look at my demo. If you want add your style then add class to components to change there style.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-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">Apps & Games <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
</div>
</div>
</div>

Answer 2

I got it solved just amazon like search using this:
<div class="input-group my-group">
<select id="filter_type" name="filter_type" class="selectpicker form-control" style="width:30%;">
<option value>Select Filter Type..</option>
<option value="all">All</option>
<option value="firstname">First Name</option>
<option value="lastname">Last Name</option>
<option value="email">Email</option>
</select>
<select id="search" name="search" class="selectpicker form-control" disabled="disabled" style="width:70%; display:block;">
<option value>select filter type first</option>
</select>
<input type="text" class="form-control" style="width:70%; display:none" name="searchfield" id="searchfield" placeholder="Enter username...">
<span class="input-group-btn">
<button id="submit" name="submit" class="btn btn-primary" disabled="disabled" type="submit">Filter</button>
</span>
</div>

Answer 3

Just right click the amazon search bar and check out the code behind.