使用select2實現多功能下拉框，select2中文api
最近專案中有個需求是商品能夠選擇多個標籤，類似jire中選擇標籤：
能把選擇後選項顯示在輸入框中，刪除時連同整個標籤一起刪。經過網上諮詢、請教同事後，得到一致意見是使用select2。
下面是使用select2的初始化、動態賦值，實現標籤化多選、以及遇到的問題：
2，在頁面中新建：<div id="test_select2"></div>，
3，初始化select2很簡單，$('#test_select2').select2();就行，這是沒有任何屬性和值的最簡單初始化，下面介紹幾個常用的屬性：
var itemList =[{id:1,text:'測試1'}{}{}{{}{}{}{}];//類似的json陣列格式，可以單獨用jquery的ajax獲取伺服器的資料。
$('#test_select2').select2({
placeholder : '輸入話題關鍵字',
tags : true,
multiple : true,
height: '40px',
maximumSelectionLength : 3,
allowClear : true,
language: "zh-CN",
data : itemList itemList是[{}{}{}{}]格式的陣列
});
4，經過上面三步後的效果：
下表是select2常用的屬性：
|
Width |
字串 |
控制 寬度 樣式屬性的Select2容器div |
|
minimumInputLength |
int |
最小數量的字元 |
|
maximumInputLength |
int |
最大數量的字元 |
|
minimumResultsForSearch |
Int |
最小數量的結果 |
|
maximumSelectionSize |
int |
可選擇的最大條目數 |
|
placeholder |
字串 |
選擇初始值 |
|
separator |
字串 |
分隔符字元或字串用來劃定id |
|
allowClear |
布林 |
此選項只指定佔位符 |
|
multiple |
布林 |
Select2是否允許選擇多個值 |
|
openOnEnter |
開啟下拉如果設定為true,當用戶按下回車鍵,Select2關閉。 預設情況下啟用這個選項。 |
|
|
id |
函式 |
函式用於獲取id從選擇物件或字串id儲存代表的關鍵 |
|
matcher |
函式 |
用於確定是否搜尋詞匹配一個選項時使用一個內建的查詢功能 |
|
sortResults |
函式 |
用於排序列表搜尋之前顯示的結果。 |
|
formatSelection |
函式 |
函式用於呈現當前的選擇 |
|
formatResult |
函式 |
函式用來渲染結果, |
|
formatResultCssClass |
函式 |
函式用於新增css類結果元素 |
|
formatNoMatches |
字串/函式 |
字串包含“不匹配”訊息,或 函式用於呈現資訊 |
|
formatSearching |
字串/函式 |
字串包含“搜尋… “訊息,或 函式用於呈現顯示的訊息 正在進行搜尋。 |
|
formatAjaxError |
字串/函式 |
字串包含訊息“載入失敗”,或 函式用於呈現資訊 |
|
formatInputTooShort |
字串/函式 |
包含“搜尋”輸入太短訊息的字串,或 函式用於呈現資訊。 |
|
formatInputTooLong |
字串/函式 |
包含“搜尋”輸入太短訊息的字串,或 函式用於呈現資訊 |
|
formatInputTooLong |
字串/函式 |
包含“搜尋輸入字串太長”訊息,或 函式用於呈現資訊。 |
|
formatSelectionTooBig |
字串/函式 |
字串包含“你不能選擇任何更多的選擇”訊息,或 函式用於呈現資訊 |
|
formatLoadMore |
字串/函式 |
字串/函式 |
|
createSearchChoice |
函式 |
建立一個新的可選選擇從使用者的搜尋詞。 允許建立通過查詢選擇不可用 功能。 有用的使用者可以建立動態的選擇時,如“標籤”usecase。 |
|
createSearchChoicePosition |
函式/字串 |
定義的位置插入元素 |
|
initSelection |
函式 |
呼叫Select2建立允許使用者初始化選擇的值 select2附加到元素 |
|
tokenizer |
函式 |
記號賦予器函式可以處理後輸入搜尋框的輸入每一個按鍵和提取 並選擇選擇。 |
|
tokenSeparators |
函式 |
一個字串陣列定義標記為預設的分隔符 分詞器 功能。 預設情況下,此選項設定為一個空陣列標記這意味著使用預設 編譯器是禁用的。 通常是明智的,設定該選項值相似 [',',' '] 。 |
|
query |
函式 |
函式用於搜尋詞的查詢結果。 |
|
ajax |
物件 |
選擇內建的ajax查詢功能。 這個物件作為快捷方式有手動編寫一個函式,執行ajax請求。 內建函式支援更高階的特性,比如節流和無序的反應。 |
|
data |
陣列/物件 |
擇建在查詢功能,使用陣列。 |
|
tags |
陣列/函式 |
將Select2放入“標籤'mode,使用者可以新增新的選擇和預先存在的標籤是通過提供 這個選項的屬性是一個 陣列 或者一個 函式 返回一個 陣列的 物件 或 字串 。 如果 字串 而不是使用 物件 他們將有一個被轉換成一個物件 id 和 文字 屬性相等 的值 字串 。 |
|
containerCss |
函式/物件 |
內聯css將被新增到select2的容器。 一個物件包含css屬性/值金鑰對或一個函式,這個函式返回一個物件。 |
|
containerCssClass |
函式/字串 |
Css類將被新增到select2容器的標籤。 |
|
dropdownCss |
函式/物件 |
內聯css將被新增到select2下拉的容器。 一個物件包含css屬性/值金鑰對或一個函式,這個函式返回一個物件。 |
|
dropdownCssClass |
函式/字串 |
Css類將被新增到select2下拉的容器。 |
|
dropdownAutoWidth |
布林 |
當設定為 真正的 嘗試自動尺寸下拉基於內容的寬度。 |
|
adaptContainerCssClass |
函式 |
過濾器/重新命名的css類,因為他們被複制從源標籤select2容器標籤 |
|
adaptDropdownCssClass |
函式 |
濾器/重新命名的css類,因為他們被複制從源標籤select2拉標籤 |
|
escapeMarkup |
函式 |
函式用於後處理標記從格式化程式返回功能。 預設情況下這個功能轉義的html實體,以防止javascript注入。 |
|
selectOnBlur |
布林 |
設定為 真正的 如果你想要Select2選擇當前高亮選項時模糊。 |
|
loadMorePadding |
整數 |
定義了多少畫素需要載入下一頁前折以下。 預設值是 0 這意味著結果列表需要滾動到下一個頁面的底部載入的結果。 這個選項可以用來觸發載入更快,可能導致更流暢的使用者體驗。 |
|
nextSearchTerm |
函式 |
函式用於確定下一個搜尋詞應該是什麼 |