如何使select2搜索框＆＃34;内联＆＃34;？

Question

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

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

我想在select2中实现相同的目标。您会注意到在select2中当前选择的值＆＃34;＆＃34;与搜索框不同。

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

Answer 1

您使用了多个 Html属性：

例如： 使用For bootstrap Css和Bootstrap Script

使用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>

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>

尝试代码：