MVC的自动填充功能

为了实现这个功能，几乎两个周没有作别的事情，好在是最近不是很忙，领导也没有安排其他的工作，所以才能静下心来认真的，不厌其烦的来学这个事情，这个功能其实涉及的东西比较多，例如javaScript, jQuery, JSON, MVC等。其中几乎每一样对外来说都不是很精通，也正好一边学，一边实现功能。

先上代码：

第一部分：引用

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet"   />
<script src="~/Scripts/jquery-2.0.3.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.js"></script>

解释一下

三条引用中，第二条和第三条是必须的，没有的话，就不能实现是自动填充的功能，版本无所谓，但是别太老，因为我这边测试jquery1.4版本的貌似autocomplete的 部分会有很大的差异。所以建议尽量用新一点的版本，这里第一条引用不是必须的，但是没有的话，会比较难看。

第二部分：javaScript代码

这里实现多值填充：

<script>
$("#text1").each(function () {
var target = $(this);
target.autocomplete({
source: function (req, resp) {
$.ajax({
url: target.attr("data-autocomplete-source"),
type: "POST",
dataType: "json",
data: { term: req.term },
success: function (data) {
resp($.map(data, function (item) {
return { label: item.FirstName, value: item.FirstName, Address: item.Address, Title:item.Title};
}));
}
});
},
select: function (event, ui) {
if (ui.item) {
$("#text1").val(ui.item.label);
$("#text2").val(ui.item.Title);
$("#text3").val(ui.item.Address);
}
}
});
});

继续解释代码

第一行：$(“#text1”).each(function (){}

这个是格式，套用就行，需要改的就是#号后面的部分，这个是ID，即你希望进行输入的textbox的ID。

第二行可以不这个写，这个是我自己的编程风格。在于第三行：

target.autocomplete({})这个函数，其实是使用的target.autocomplete({source,select}）格式，当然时间可以再添加其他的参数，不过采用了多值填充最基本的两要素格式，看上面额代码感觉很多，但是其实其他的代码主要是对source和select的必要参数的赋值。赋值的方式在要赋值的要素后加function(){},这里可以是带对应参数的。

其中source使用了ajax的函数

$.ajax({
url: target.attr("data-autocomplete-source"),
type: "POST",
dataType: "json",
data: { term: req.term },
success: function (data) {
resp($.map(data, function (item) {
return { label: item.FirstName, value: item.FirstName, Address: item.Address, Title:item.Title};

这是ajax的基本格式，套用就行。

1、url后面是网址，‘target.attr(“data-autocomplete-source”)’是我在开始时候赋的值”@Url.Action(“QuickSearch”, “Home”)”。也就是你自己的网址jSON动作。

2、type就这么写就行，需要注意的是，你的”@Url.Action(“QuickSearch”, “Home”)”不需要是HttpPOST。

3、dataType: “json”,这个也是格式，这么写就可以。

4、data: { term: req.term },格式这个写就行，但是需要注意的地方就是req是source的参数，需要和的括号内的对应，req, resp其实分别对应请求和相应，这里data的term参数需要和请求的term对应。

5、这里需要重点说的是success部分，这里非常容易出错，也是肯以实现很多功能的地方。我们来分开分析：

success: function (data) {
resp($.map(data, function (item) {
return { label: item.FirstName, value: item.FirstName, Address: item.Address, Title:item.Title}}}

这个参数的定义是，在数据源请求成功后，实现的功能，一般用函数赋值，ajax请求的是JSON数据源，所以返回的数据也是JSON，因为这其实是一个赋值的过程，我们要把获得的JSON数据赋值给响应。所以函数形式需要带data的参数。success: function (data) {}，因为是要给响应赋值，所以就是success: function (data) { resp}

map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。

我就把它理解为格式吧：

.map(data,function(item)returnobject其中returnlabel:item.FirstName,value:item.FirstName,Address:item.Address,Title:item.Title这个中，label，和value必须有，其他的参数则可以随便，命名，用来填充其他的textbox。但是这里resp(.map()}这个形式还不太理解，我把他理解为用map为网页响应赋值（而且是对集合赋值）。这样就可以在select的要素中进行赋值了。

6、来看select要素的赋值

select: function (event, ui) {
if (ui.item) {
$("#text1").val(ui.item.label);
$("#text2").val(ui.item.Title);
$("#text3").val(ui.item.Address);
}

同样是利用函数赋值（注意带两个参数） ，因为是响应用户操作，所以需要用event参数，同时通过UI这里应该是从上面的resp中传过来的参数，然后用if语句，标识如果用户选择了选项，那么就给其他的输入标签赋值。这里没什么，需要注意的一个地方就是赋值的时候是用的val。

至此前台代码就写好了，后台的代码其实无所谓，就按照一般的JSON获取语句写就可以了，这里为了方便起见，还是将后台的数据代码列出来，仅供参考：

public ActionResult QuickSearch(string term)
{
var result = GetEmployees(term).Select(a => new { FirstName = a.FirstName, Title = a.Title, Address =a.Address});
return Json(result, JsonRequestBehavior.AllowGet);
}

private List<Employee> GetEmployees(string searchString)
{
IEnumerable<Employee> datasource = new[]
{
new Employee { Address="山东", FirstName="petre", EmployeeID=0, Title="董事" },
new Employee { Address="日本", FirstName="Alice", EmployeeID=0, Title="经理" },
new Employee { Address="广东", FirstName="Bob", EmployeeID=0, Title="副经理" },
new Employee { Address="台湾", FirstName="Chails", EmployeeID=0, Title="董事" },
new Employee { Address="澳门", FirstName="Thomas", EmployeeID=0, Title="董事" },
new Employee { Address="北京", FirstName="Mike", EmployeeID=0, Title="董事长" }
};
return datasource
.Where(a => a.FirstName.Contains(searchString))
.ToList();
}

以上是json的代码。

下面是control的代码

public ActionResult Index()
{
return View();
}

<input type="text"  id="text1" data-autocomplete-source="@Url.Action("QuickSearch", "Home")"/>
<input type="text" id="text2" data-autocomplete-source="@Url.Action("QuickSearch", "Home")" />
<input type="text" id="text3" data-autocomplete-source="@Url.Action("QuickSearch", "Home")" />

以上是三个输入框。

至此，就可以实现基于MVC的多值自动填充功能了。

由于是一遍学习一遍写的，（html前端不是很精通，刚开始学习），所以理解上可能会一些错误，欢迎大家指正。

虽然我暂时还是不是很精通，但是这部分功能，可以比较灵活的实现了，也欢迎大家有什么问题，给我留言。我尽量帮大家测试，一起解决。

这里还需要补充的一点就是js的位置很重要，输入标签一定要在scripts代码的前面。