如何使select2搜索框「內聯」？

我正在從Twitter的typeahead.js遷移到select2。如何使select2搜索框「內聯」？

我真正喜歡typeahead.js的一件事是選定的值和搜索框如何出現在同一個字段中。你可以試試here。

我想在select2中做到這一點。您會注意到，在select2中，「當前選定的值」與搜索框不同。

Picture here

如何讓這個是同樣的元素？

來源

2015-10-28 Christopher Watson

注意：我想要使用select2'single'下拉菜單，而不是'multiple'。 –

你有沒有看過實現一個自定義selectionAdapter與這種能力？你可以從[this]開始（http://jsfiddle.net/0z40mk63/） - 它工作得很糟糕，但至少給出了一個想法，從哪裏開始 – Dethariel

你有沒有想通過的方式？ – pwas

-2

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

try代碼：

來源

2017-05-05 12:50:27

有點解釋可以在創建一個有用的答案很長的路要走 - [答案] – Tom

我已經寫了一個代碼只有一個下拉其他明智的鏈接到bootsrtap css –

你有執行代碼片段 –

你已經使用多 HTML屬性應用於：

例如：使用對於引導CSS和引導腳本

使用對於Bootstrap選擇Css和Sc RIPT

使用對於最新的查詢版本

寫你的下拉顯示代碼

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

例如：

\t \t \t 
 
\t \t \t <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>

來源

2017-05-16 12:35:02

如何使select2搜索框「內聯」？

回答

相關問題