.net MVC中使用jquery ui 的autocomplete

 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的话，就必须写一个字符才会有匹配的下拉框出现