【筆記】select2的使用

<script src="~/Scripts/jquery-1.10.2.js"></script>

    <script src="~/Content/bootstrap/js/bootstrap.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />

    <script src="~/Content/select2-master/dist/js/select2.js"></script>
    <link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />

 

function loadAssetNameOrVersion(displayText) {
    displayText = displayText || "請選擇";
    $("#asset_nameOrVersion").select2({
        placeholder: displayText,//默認顯示
        minimumInputLength: 0,//輸入多少長度的值的時候執行后台請求查詢
        //選中事件（選中后顯示的值）
        formatSelection: function (object) {        
            return object.assetName + "/" + object.productName;
        },
        //顯示的值（加載的在下拉框的值）
        formatResult: function (object) {
            return object.assetName + "/" + object.productName;
        },
        id: function (data) {//選中后取的值
            return data.productId;
        },
        ajax: {
            url: "/api/services/app/asset/GetOfficeProductsByKey",
            dataType: "json",         
            params: {
                contentType: 'application/json'//此處可修改contentType類型（這個地方坑了我好久，不知道還要加params包起來）
            },
            type: "post",//請求類型
            data: function (term, page) {//傳給后台的參數，可自行構造
                return JSON.stringify({
                    prefix: term,
                    limit: 4,
                    page: page,
                });
            },
            results: function (data, page, query) {        //請求成功，接收返回值       
                var more = (page * 4) < data.result.totalCount;
                return { results: data.result.items, more: more };
            },
        }
    });
}

 可下拉搜索，下拉分頁，還是比較強大的！