http://jqueryui.com/autocomplete/#default 这是例子
下载了这个jquery-ui-1.12.1.custom
项目中需要加载
首先说没有使用json的情况,
这种情况就非常简单,
本地数据源
<p> @Html.TextBox("tags") </p>
$(function () {
var availableTags = [
"黄1",
"黄2",
"黄3",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#Text1").autocomplete({
source: availableTags
});
})
</script>
上面的例子就是最简单的 ,
autocomplete 里面的 source 设置为一个数组就可以了
当然,实际开发中,这个数组的来源一般是后台代码访问数据库所得到的,
并且以json的格式传过来
<div class="form-group">
<label for="Vin" class="col-sm-6 control-label">VIN号</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="Vin" name="Vin" placeholder="请输入VIN号">
</div>
</div>
<div class="form-group">
<label for="Vmodel" class="col-sm-6 control-label">车辆型号</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="Vmodel" name="Vmodel" placeholder="请输入车辆型号">
</div>
</div>
<div class="form-group">
<label for="CustomerName" class="col-sm-6 control-label">客户名称</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="CustomerName" name="CustomerName" placeholder="请输入客户名称">
</div>
</div>
<div class="form-group">
<label for="DepartDate" class="col-sm-6 control-label">发车日期</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="DepartDate" name="DepartDate" placeholder="请输入发车日期">
</div>
</div>
js如下
$(function () {
$("#Vin").autocomplete({
source: function (request, response) {
$.ajax({
url: "/Home/VinJson",
type: "POST",
dataType: "json",
data: { Vin: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Vin,
value: item.VehicleModel,
DeliveryDate: item.DeliveryDate,
CustomerName: item.CustomerName
}
}
));
} //end success
}); //end ajax
}, //end source
focus: function (event, ui) {
$("#Vmodel").val(ui.item.value);
$("#CustomerName").val(ui.item.CustomerName);
$("#DepartDate").val(ui.item.DeliveryDate);
return false;
}, //end focus
select: function (event, ui) {
$("#Vin").val(ui.item.label);
return false;
}, //end select
minLength: 0
}); //end autocomplete
});
后台action
public JsonResult VinJson(string Vin)
{
//List<Vinfo> VinfoList = new List<Vinfo>();
var VinfoList = db.sw_tb_VehicleInfo.Join(db.sw_tb_Customers, m => m.strCustomerCode, rm => rm.strCustomerCode, (m, rm) =>
new Vinfo
{
Vin = m.strVIN,
VehicleModel = m.strVehicleModel,
DeliveryDate = m.dtDeliveryDate,
CustomerName = rm.strCustomerNameCn
}).OrderBy(sm => sm.Vin).ToList().AsEnumerable();
VinfoList = VinfoList.Where(m => m.Vin.Contains(Vin));
return Json(VinfoList, JsonRequestBehavior.AllowGet);
}
这里用到的model
public class Vinfo
{
public string Vin { get; set; }
public string VehicleModel { get; set; }
public string DeliveryDate { get; set; }
public string CustomerName { get; set; }
}
从上面的代码可以看到,source对应的是ajax的内容,
ajax的url就是刚才后台代码写的VinJson
而data 根据Vinfo的内容重新定义,
label对应Vin
value对应VehicleModel
DeliveryDate对应DeliveryDate
CustomerName对应CustomerName
这里要说明为什么一定要有 label 和 value这两个名字呢???
因为jquery ui 里面的 autocomplete 默认情况下:是用label进行搜索,value进行显示!
所以为了我就这样子命名了,
当然也可以按照你喜欢的规则进行搜索和显示,这里就不演示了。
然后我们分析一下:focus
focus指的是下拉框选择的时候触发的事件
当vin中输入然后选择时
$("#Vmodel").val(ui.item.value);
$("#CustomerName").val(ui.item.CustomerName);
$("#DepartDate").val(ui.item.DeliveryDate);
这三个input显示相应的值
那么select事件指的是按回车确定的事件:
我把 label 填入了 Vin里面了
最后的minLength是最好理解的:匹配字符串的最短长度,
如果是1的话,就必须写一个字符才会有匹配的下拉框出现