bootstrap输入组选择字段，文本字段和搜索字段

Question

我想构建类似于亚马逊网站的搜索栏。

选择输入字段，后跟输入字段，后跟搜索按钮。

这是我到目前为止所得到的：

问题是如果我更改为输入字段，则button1下拉列表不是选择输入字段。

bootstrap网站中的示例不显示带有输入字段选择但下拉菜单的组。

我的代码

 <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><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
          </ul>
        <button class="btn btn-primary" type="submit">
              <span class="glyphicon glyphicon-search"></span>
            </button>
    </span>


        </div>

css - 删除中心输入字段或按钮的曲线半径

.custom{
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}

Answer 1

请看看我的演示。如果要添加样式，则将类添加到组件以更改样式。

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

我用它解决了像搜索一样的亚马逊：

<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

右键单击亚马逊搜索栏并查看后面的代码。