selec2组件使用方法

select2组件是一款代搜索功能的html下拉框辅助组件，官方 demo以及文档：http://select2.github.io/examples.html

=》

最简单的使用方法（前期绑定数据）：

1.在html页面上新建select控件。该select控件可以由asp.net DropDownList控件生成，也可以自己写html，也可以mvc 生成 @Html.DropDownListFor(t => t.OutHandlerId, ViewBag.Users as List<SelectListItem>)

1 <select name="ddlSelect2Demo" id="ddlSelect2Demo" style="100px;">
2     <option value="1">江苏</option>
3     <option value="2">安徽</option>
4     <option value="3">上海</option>
5     <option value="4">北京</option>
6     <option value="5">浙江</option>
7 </select>

View Code

2.页面引入selec2组件（vs环境下建议使用nuget），包含：select2.min.css、select2.min.js。依赖jquery 1.7以上版本需提前准备

3.在页面加载完毕后使用js 调用select2初始化配置select组件

1 <script type="text/javascript">
2         $(document).ready(function () {
3             InitSelect2();
4         });
5 
6         function InitSelect2() {
7             $("#ddlSelect2Demo").select2();
8         }
9     </script>

View Code

完整demo（asp.net webForm方式）

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Select2Demo.aspx.cs" Inherits="WebApp_Select2Demo.Select2Demo" %>
 2 
 3 <!DOCTYPE html>
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head runat="server">
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 8     <title>Select2Demo</title>
 9 
10     <%--1.nuget引入select2前端组件包--%>
11     <link href="Content/css/select2.min.css" rel="stylesheet" />
12     <script src="Scripts/jquery-1.8.2.min.js"></script>
13     <script src="Scripts/select2.min.js"></script>
14     
15     <script type="text/javascript">
16         $(document).ready(function () {
17             InitSelect2();
18         });
19 
20         function InitSelect2() {
21             $("#ddlSelect2Demo").select2();
22         }
23     </script>
24 </head>
25 <body>
26     <form id="form1" runat="server">
27     <div>
28         筛选下拉框：
29         <asp:DropDownList ID="ddlSelect2Demo" runat="server" Width="100px"></asp:DropDownList>
30     </div>
31     </form>
32 </body>
33 </html>

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 
 8 namespace WebApp_Select2Demo
 9 {
10     public partial class Select2Demo : System.Web.UI.Page
11     {
12         protected void Page_Load(object sender, EventArgs e)
13         {
14             ddlSelect2Demo.Items.AddRange(new ListItem[]
15             { 
16                 new ListItem("江苏","1"),
17                 new ListItem("安徽","2"),
18                 new ListItem("上海","3"),
19                 new ListItem("北京","4"),
20                 new ListItem("浙江","5"),
21                 new ListItem("广东","6"),
22                 new ListItem("西藏","7"),
23                 new ListItem("云南","8"),
24                 new ListItem("山东","6"),
25                 new ListItem("青海","7"),
26                 new ListItem("新疆","8"),
27             });
28         }
29     }
30 }

View Code

.net mvc方式也差不多：

在后端Controller写select数据源：ViewBag.Users = new List<SelectListItem>{　　/*下拉框数据*/};

前端绑定数据源：@Html.DropDownListFor(t => t.OutHandlerId, ViewBag.Users as List<SelectListItem>)

1.在下拉数据量小于1000以下，直接List绑定到select控件，非常简单

2.下拉数据量巨大，>5000情况下，要么用ajax远程json动态读取方法，要么仍用方法1但是总List缓存（根据需求每1h或者每天）

其他注意点：

1.务必加载$(“#id”).select2()

2.tags：false（默认）不需添加。若为了true将把新增的name作为id传入后端（所以id类型为string）

下面一段为复杂配置，支持远程ajax、并且对结果进行处理

//初始化页面上的所有select2组件
function InitSelect2() {
    $(".goodsNames").select2({
        ajax: {
            //url: "https://api.github.com/search/repositories",
            url: "../Goods/GetGoodsInfoByLikeName",
            dataType: 'json',
            delay: 500,
            data: function (params) {
                return {
                    q: params.term,
                };
            },
            processResults: function (data) {
                return { results: data };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; },
        minimumInputLength: 1,
        templateResult: formatRepo,
        templateSelection: formatRepoSelection,
        tags: (!IsOutWarehouse())  //true：允许用户输入新事物名，入库或入库同时出库；false：仅允许选中已有的事物、不需输入新的，出库
    });
}

//卸载页面上的所有select2组件
function DestroySelect2() {
    $(".goodsNames").select2('destroy');
}

//select2搜索结果下拉框操作回调
function formatRepo(repo) {
    if (repo != null && repo != undefined) {
        //可获取到接口的其他属性：Quantity等
        if (repo.id == repo.text) {
            if (IsPositiveFloat(repo.id)) {
                return "";  //禁止事物名为纯数字，防止后端混淆
            } else {
                return repo.text + "（新）";
            }
        } else {
            return repo.text;
        }
    }
}

//select2选中结果操作回调
function formatRepoSelection(repo) {
    var selectElemName = repo.element.parentNode.name;
    if (IsOutWarehouse()) {   //出库不许新增，所以不会出现此情况
        if (repo.Quantity <= 0) {
            alert("该事务库存为0，无法出库。请及时采购");
            //TODO:BUG  体验很不好
            //$("select[name='" + selectElemName + "']").val("");
            $("select[name='" + selectElemName + "']").select2().val(null).trigger("change");
            return "";
        }
    } else {
        if (IsPositiveFloat(repo.id)) {
            return "";  //禁止事物名为纯数字，防止后端混淆
        } else {
            return repo.text + "（新）";
        }
    }

    //事务存在，则赋值
    if (repo.Quantity != undefined) {
        var id = GetIdByElemName(selectElemName);
        $("select[name='WarehouseInOutDetails[" + id + "].GoodsIdOrNameStr']").attr("data-goodsid", repo.id);
        $("input[name='WarehouseInOutDetails[" + id + "].Quantity']").attr("data-stock-num", repo.Quantity);
        $("select[name='WarehouseInOutDetails[" + id + "].UnitId']").val(repo.UnitId);
        $("select[name='WarehouseInOutDetails[" + id + "].TypeId']").val(repo.TypeId);
    }
    return repo.text;
}