如何使 select2 搜索框“内联”？

Question

我正在从 Twitter 的 typeahead.js 迁移到 select2。

我非常喜欢 typeahead.js 的一件事是所选值和搜索框如何出现在同一字段中。 你可以在这里试一试。

我想在 select2 中实现相同的目标。 您会注意到在 select2 中，“当前选择的值”与搜索框位于不同的位置。

我如何使它成为相同的元素？

Answer 1

您使用了多个Html 属性：

例如：使用 For bootstrap Css 和 Bootstrap 脚本

使用 For Bootstrap Select Css 和脚本

使用最新查询版本

写下你的下拉代码

 <select class="selectpicker" data-live-search="true" multiple> <option data-tokens="ketchup mustard">Hot</option> <option data-tokens="mustard">Burger</option> <option data-tokens="frosting">Sugar</option> </select>

例如：

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script> <select class="selectpicker" multiple> <option data-tokens="Pizza">Pizza</option> <option data-tokens="Burger">Burger</option> <option data-tokens="Sugar">Sugar</option> </select>

Answer 2

至少现在总是内联...

 $(document).ready(function() { $('select').select2(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script> Inline: <select> <option value="Pizza">Pizza</option> <option value="Burger">Burger</option> <option value="Sugar">Sugar</option> </select> indeed!

但！ 如果您使用引导程序，则必须使表单内联。 只需将类form-inline添加到表单中即可。 我必须这样做才能使其内联...

Answer 3

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script> <select class="selectpicker" data-live-search="true" multiple> <option data-tokens="ketchup mustard">Hot</option> <option data-tokens="mustard">Burger</option> <option data-tokens="frosting">Sugar</option> </select>

尝试代码：