JS元件Bootstrap之select2 使用心得

imOne發表於2018-01-30
JS元件boot

2018-01-30

需求描述：輸入框實時搜尋功能，其中一個支援多選。如圖：

 

 

解決方案：採用前端元件——select2（Select2提供了一個可自定義的選擇框，支援搜尋，標記，遠端資料集和許多更高階的選項。）

參考連結：

select2入門地址：https://select2.org/

github地址：https://github.com/select2/select2

 

1.使用方法簡介：

首先 引入 select2 元件的相關JS\CSS等檔案，可下載到本地引入或遠端地址引入。

以下示例為遠端引入：

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

 

2.構造以下元素，並進行渲染，一個簡單的下拉框就出現了。

<select class="js-example-basic-single" name="state">

　　<option value="AL">Alabama</option>

　　...

　　<option value="WY">Wyoming</option>

</select>

 

 $('.js-example-basic-single').select2(); 

 

關於需求的部分程式碼如下：

<tr>
     <td style="width:30%">主導部門</td>
     <td style="width:70%"><select class="js-example-basic-single" id="leadDepart" style="width:100%"></select></td>
</tr>
<tr>
     <td style="width:30%">輔助部門</td>
     <td style="width:70%"><select multiple class="js-example-basic-single" id="assDepart" style="width:100%"></select></td>
</tr>

若想支援多選，只需在select標籤里加上 multiple 屬性即可，如上輔助部門。

 

 

　　　　$("#assDepart").select2({
            ajax : {
                url:"url",
                data:function (params) {
                  return {
                    q: params.term, // 搜尋詞
                    flag :"select",
　　　　　　　　　　　　... //此處可定義多個引數
                    leadSearch : $("#leadDepart").val(),
                    assSearch : $("#assDepart").val()
                  };
                },
                minimumInputLength: 2, // 最小搜尋詞長度
                delay: 1000, // 延遲ms
                method : 'POST',
                dataType:'json',
                processResults: function (data) {
                    return {
                      results: data.jsonData //後臺返回的資料
                    };
                }
            }
        });
ajax請求

 

 public JSONObject departGroup(UserContext uc, RequestParams params) {
         
            String leadSearch = params.get("leadSearch");
             String assSearch = params.get("assSearch");
            String query = params.get("q");
             
             JSONObject jsobj = new JSONObject();
             JSONArray jsonArray = new JSONArray();
 
             List<RowMap> list = dao.getData(...);
             for (int i = 0; i < list.size(); i++) {
                 JSONObject obj = new JSONObject();
                 RowMap rowMap = list.get(i);
                 obj.put("id", rowMap.getString("ID"));
                 obj.put("text", rowMap.getString("TEXT"));
                 if (query != null && !"".equals(query)) {
                     if(obj.getString("text").contains(query)){
                         jsonArray.add(obj);
                     }
                 } else {
                     jsonArray.add(obj);
                 }
             }
             
             jsobj.put("jsonData", jsonArray);
             return jsobj.toString();
         
    }
後端載入資料

 

3. select2提供的一些事件

$('#mySelect2').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
});

data返回的資料物件，包含多個屬性：
{ "id": 1, "text": "text",...}

 

$eventSelect.on("select2:open", function (e) { alert("select2:open"); });//下拉框開啟時觸發
$eventSelect.on("select2:close", function (e) { alert("select2:close"); });
$eventSelect.on("select2:select", function (e) { alert("select2:select"); });//輸入框點選時觸發
$eventSelect.on("select2:unselect", function (e) { alert("select2:unselect"); });

$eventSelect.on("change", function (e) { alert("change"); });//輸入框中值改變時觸發

 

//使select2 預設選中多個值。選中多個值時 val()中的值必須是陣列形式（如：['','','']）；若只需要選中一個，val()中賦值為該option的value值即可
$("#assDepart").select2({ data: data}).val(['1','2','3']).trigger("change");

 

 

4.關於中文提示

看到有人引入官方文件提供的zh-cn屬性和JS來處理中文，我採用另一種簡單粗暴的解決方案：直接找到JS原始碼進行修改即可。

——在原始檔中找到 select2.min.js檔案，用記事本開啟。ctrl+F 搜尋 “Searching...”，將找到的程式碼改為“查詢中...”，再繼續搜尋 “no results found”，同理修改為“無資料”。

至此，大功告成！此辦法暫未發現異常。

 

關於select2的總結就到這裡，由於使用較少。如有其他問題，歡迎留言區補充。

更多內容建議參考官方文件。https://select2.org/

 

相關文章