select2 使用

參考文檔： http://blog.csdn.net/u014388408/article/details/50587405

官網：http://select2.github.io/

官網文檔：http://select2.github.io/select2/select2-latest.html

例子：

$(this).select2({
            placeholder           : option.placeholder,
            width                 : option.width,
            allowClear            : option.allowClear,  //容許清空所有
            separator             : ",", //數值分割
            maximumSelectionLength: option.maximumSelectionLength, //最大選數據
             multiple              : option.multiple,
            language              : "zh-CN",
            maximumInputLength    : 5, //最大輸入度爲10,超過就不作查詢
            formatSearching       : '正在載...',
            formatNoMatches       : '沒有返回結果',
            //selectOnClose: true, //當關閉下拉框後，就選中一條
            //closeOnSelect: false, //當選中後不關閉下拉框
            // minimumInputLength: 1, //最小輸入1個字符,不然就不查詢
            // minimumResultsForSearch: 15, //若是數據足夠,最少要展現15條數據
            //templateResult:function(data){return '<p>'+data.text+'<p>';}, //結果渲染,如渲染成html
            //templateSelection:function(data){return data.myAbbr},//當選中後自定義展現的樣子
            //minimumResultsForSearch: Infinity, //永久的隱藏查詢框
            insertTag             : function (data, tag) {
                // 將選中的項,插入到標籤列表後面,你也能夠插入到前面
                data.push(tag);
            },
            //createTag:function(params){}, //定義建立tag的過程
            ajax                  : {
                url           : "/store/getStorePagingList",
                cache         : true,
                delay         : 500, //延時0.5秒後查詢
                dataType      : 'json',
                data          : function (params) {
                    if (!params.page) {
                        params.page = 1
                    }
                    return {
                        storeName: params.term,
                        pageNo     : params.page,
                        pageSize : option.pageSize
                    };
                },
                processResults: function (data, params) {
                    var totalPage = params.page;
                    if (data) {
                        totalPage = data.totalPage;
                        data = data.content;
                    } else {
                        data = []
                    }

                    data = $.map(data, function (obj) {
                        obj.text = obj.storeName;
                        return obj;
                    });

                    return {
                        results   : data,
                        pagination: {
                            more: params.page < totalPage // 總頁數爲10，那麼1-9頁的時候均可如下拉刷新
                        }
                    };
                }
            }
        });

事件：

例子：

$('select').on('select2:select', function (evt) {
  // Do something
});

//賦值
$('select').val('US'); 

//觸發某個事件
$('select').trigger('change');

Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions.

change

Triggered whenever an option is selected or removed.

select2:close

Triggered whenever the dropdown is closed.

select2:closing

Triggered before the dropdown is closed. This event can be prevented.

select2:open

Triggered whenever the dropdown is opened.

select2:opening

Triggered before the dropdown is opened. This event can be prevented.

select2:select

Triggered whenever a result is selected.

select2:selecting

Triggered before a result is selected. This event can be prevented.

select2:unselect

Triggered whenever a selection is removed.

select2:unselecting

Triggered before a selection is removed. This event can be prevented.

 

具體參數能夠參考一下： 參數	類型	描述
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	函數	函數用於肯定下一個搜索詞應該是什麼