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

Posted 2023-03-14

【中文标题】如何使 select2 搜索框“内联”？

【英文标题】：How do I make the select2 search box "inline"?

【发布时间】：2016-01-27 16:11:59

【问题描述】：

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

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

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

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

【问题讨论】：

注意：我想使用 select2 single 下拉菜单，而不是 multiple。

您是否考虑过实现具有这种能力的自定义 selectionAdapter ？您可以从 this 开始 - 它的效果非常糟糕，但至少给出了从哪里开始的想法

你找到方法了吗？

你找到办法了吗？

【参考方案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

你有执行片段

这个答案没有任何解释