完成JQUERY的自动填充功能:
首先在页面要去去要填充数据:
页面:
<tr>
<td nowrap="true">
设备号:
</td>
<td>
<input type="text" class="TextBox100" id="VehicleNumber"/>
</td>
</tr>
首先设置#VehicleNumber的最小长度为0.
然后去去该文本框中的数据。
然后设置该文本框的点击事件,当点击的时候就去触发显示该下拉列表。
他返回的是JSON数据的格式。
$("#VehicleNumber").autocomplete({
minLength: 0
});
$.getJSON('@Url.Action("GetVehicleSearchData")', {}, function (data) {
$("#VehicleNumber").autocomplete("option", "source", $.map(data, function (val) { return val.VehicleNumber }))
});
$("#VehicleNumber").focusin(function () {
$("#VehicleNumber").autocomplete("search");
});
action代码:
首先是定义数据的模型类,也就是我们页面所需要的数据集合;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace RSUWeb.Models
{
public class InitSearchVehicle
{
public string VehicleNumber { get; set; }//车辆编号
public string VehicleTypeNumber { get; set; }//整车型号
public string RsuNumber { get; set; }//RSU编号
public string SimNumber { get; set; }//SIM卡号
}
}
然后定义ACTION中的查找方法:
public ActionResult GetVehicleSearchData()
{
return Json(positionServiceIndexService.GetVehicleSearchData(), JsonRequestBehavior.AllowGet);
}
服务层代码:
一定要注意的问题,我们不能用我们已经定义好的实例类模型,估计是我定义的实例类模型中有别的对象的引用的
原因,通过实体框架我查找到的是Vehicle类型的对象,然后我通过给我自定义的类型进行赋值,然后再返回给页面。
public List<InitSearchVehicle> GetVehicleSearchData()
{
List<InitSearchVehicle> result = new List<InitSearchVehicle>();
var vehicles = positionServiceIndexRepository.GetMany(vehicle => 1 == 1);
foreach (var vehicle in vehicles)
{
InitSearchVehicle initvehicle = new InitSearchVehicle();
initvehicle.VehicleNumber = vehicle.VehicleNumber;
initvehicle.VehicleTypeNumber = vehicle.VehicleTypeNumber;
initvehicle.RsuNumber = vehicle.RsuNumber;
initvehicle.SimNumber = vehicle.SimNumber;
result.Add(initvehicle);
}
return result;
}