在bootstrap中实现搜索框

Question

除了下拉列表，我还需要一个搜索框

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class='col-sm-3'>
  <h2>Balances & History</h2>
</div>
<div class='col-sm-6'>
</div>
<div class='col-xs-2'>
  <select class="form-control">
<option value="">Select</option>
</select>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

$('.select2').select2();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<div class='col-sm-3'>
    <h2>Balances & History</h2>
    </div>
    <div class='col-sm-6'>
    </div>
    <div class='col-xs-2'>
        <select class="form-control select2">
            <option value="">Select</option>
               <option value="">Select 1234</option>
                  <option value="">Select  653</option>
                     <option value="">Select dfgd</option>
          </select>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您正在使用Angular，那么我建议使用Angular材质设计而不是bootstrap。我们目前正在开发基于角度的应用。材料设计提供了良好的用户界面，并且有很多例子。

有关静态下拉页面，请参阅以下示例。

https://material.angularjs.org/latest/demo/autocomplete