.net MVC中使用jquery ui 的autocomplete

时间:2022-08-24 21:55:52

 http://jqueryui.com/autocomplete/#default 这是例子

 

下载了这个jquery-ui-1.12.1.custom

项目中需要加载  

.net MVC中使用jquery ui 的autocomplete 

首先说没有使用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的话,就必须写一个字符才会有匹配的下拉框出现