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

【问题标题】：How do I make the select2 search box "inline"?如何使 select2 搜索框“内联”？
【发布时间】：2016-01-27 16:11:59
【问题描述】：

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

我真正喜欢 typeahead.js 的一点是所选值和搜索框如何出现在同一个字段中。你可以试试here。

我想在 select2 中实现同样的效果。您会注意到，在 select2 中，“当前选定的值”与搜索框不同。

如何使它成为同一个元素？

【问题讨论】：

注意：我想使用 select2 single 下拉菜单，而不是 multiple。
您是否考虑过实现具有这种能力的自定义 selectionAdapter ？您可以从 this 开始 - 它的效果非常糟糕，但至少给出了从哪里开始的想法
你找到方法了吗？
你找到办法了吗？

标签： javascript jquery jquery-select2 jquery-select2-4

【解决方案1】：

至少现在总是内联...

$(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 添加到表单中。我必须这样做才能使其内联...

【讨论】：

【解决方案2】：

您使用了多个使用的 Html 属性：

例如：用于引导 Css 和引导脚本

用于 Bootstrap 选择 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>

【讨论】：

【解决方案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>

试用代码：

【讨论】：

一点解释可以大大有助于创建一个有用的答案 - How to Answer
我写了一个代码只有一个下拉菜单，其他明智的链接到 bootsrtap css
你有执行片段
这个答案没有任何解释