在开发Web应用程序时，经常需要处理大量的数据。传统的解决方案通常有两种：一种是在页面上加载少量数据，然后使用JavaScript进行过滤（用户可以滚动浏览数据）；另一种是通过AJAX查询加载大量数据（但用户无法滚动浏览数据）。然而，这两种方法都有其局限性。直到Select2jQuery自动完成插件的出现，才找到了一种既能加载大量数据，又允许用户滚动浏览数据的解决方案。
本文将介绍如何在.NET MVC环境中使用Select2插件。首先，假设读者已经熟悉jQuery和.NET MVC。如果只需要访问别人的JSON服务，那么只需要jQuery经验；但如果需要创建前端和后端，那么熟悉.NET MVC会很有帮助。
本项目使用Visual Studio 2012 Express构建。如果没有这个工具，可以免费下载Visual Studio Express。Select2的设置和代码示例可以在其官方网站上找到。
要开始使用，需要下载最新版本的jQuery以及Select2的CSS和JavaScript。这些也可以通过Visual Studio中的NuGet下载。
<link href="~/Content/css/select2.css" type="text/css" rel="stylesheet" />
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/select2.js"></script>
要在前端工作，需要：
// 将发送GET请求的URL
var attendeeUrl = '@Url.Action("GetAttendees", "Home")';
var pageSize = 20;
$('#attendee').select2({
placeholder: 'Enter name',
minimumInputLength: 0,
allowClear: true,
ajax: {
quietMillis: 150,
url: attendeeUrl,
dataType: 'jsonp',
data: function (term, page) {
return {
pageSize: pageSize,
pageNum: page,
searchTerm: term
};
},
results: function (data, page) {
var more = (page * pageSize) < data.Total;
return { results: data.Results, more: more };
}
}
});
<input id="attendee" name="AttendeeId" type="text" value="" />
前端启动所需的就是这些。如果需要设置后端，事情会稍微复杂一些，但完全可以处理。
需要将数据从后端发送到Select2，以特定的格式。基本上，需要为每个返回的结果发送一个id和text值。还需要返回所有结果的总数量。这样，当开始滚动浏览数据时，Select2就知道是否需要继续请求更多数据，或者已经到达结果的末尾。
public class Select2PagedResult
{
public int Total { get; set; }
public List Results { get; set; }
}
public class Select2Result
{
public string id { get; set; }
public string text { get; set; }
}
[HttpGet]
public ActionResult GetAttendees(string searchTerm, int pageSize, int pageNum)
{
AttendeeRepository ar = new AttendeeRepository();
List<Attendee> attendees = ar.GetAttendees(searchTerm, pageSize, pageNum);
int attendeeCount = ar.GetAttendeesCount(searchTerm, pageSize, pageNum);
Select2PagedResult pagedAttendees = AttendeesToSelect2Format(attendees, attendeeCount);
return new JsonpResult
{
Data = pagedAttendees,
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
所有从数据存储中获取测试数据、搜索第一个和最后一个名字，并将结果转换为Select2PagedResult类的代码都包含在示例项目中。