select2的基本用法

公司有個項目需要用到類似百度搜索功能的下拉框，自然想到使用select2。

先看下select2的效果圖，如下：

下來簡單介紹下這個控件的基本用法，主要簡單介紹下遠程加載數據；

1.首先引入需要的文件:select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上.

2.遠程加載數據示例

$("#simple").select2({
                ajax: {
                    url: 'Handler1.ashx',
                    dataType: "json",
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) { return markup; },
                minimumInputLength: 1,
                placeholder: '請選擇',
                allowClear: true
            });

與普通ajax調用不同的是data和processResults;

注意 data方法里面有個q:params.term這個是干什么的呢？其實這是獲取當前輸入值的，也就是上圖中的“1”。這里的q:params.term;使用的時候直接照搬就行；當然你也可以把q換成你喜歡的參數名字。

processResults里面就是從后台獲取數據結果的；最終返回的數據的格式一般是這樣子："[{id:0,text:'a'},{id:1,text:'b'}]"（select2默認的數據屬性是id、text聽說新版本可以自定義）；

minimumInputLength同字面意思，即限制最少輸入一個字符；

placeholder等同文本框的placeholder;

allowClear:true表示允許清除選中的內容，即為true的時候圖中的“1”右邊會出現一個“x”，點擊后可以清除掉輸入框的內容；

本人在使用的時候在這里遇見了一個大坑,就是你寫了allowClear:true,但是點擊上面的“x“后，沒有反應，納尼，嘛情況！
網上查了下，有人說，要allowClear:true生效，必須要設置placeholder屬性，可是我寫了呀。難道js文件和select2版本不匹配？
嘗試個多個版本的js和select2還是這問題；

今天突然看到一篇外國的文章，解決了這個問題，其實很簡單就是要allowClear:true生效，必須在<select>標簽中添加一個空的<option>節點（可以不設置placeholder屬性，因為控件有默認值）；如下：

<select id="simple" style="width: 120px;">
                <option></option>
            </select>

那這是為什么呢 ？原因是The first option must be empty in order to get placeholderworking!