如何使 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>

嘗試代碼：