Jquery autocomplete 注意的一点破事

前面使用Jquery autocomplete对输入框进行自动填充代码编写，如果远程url获取的数据为单纯的string返回的json数据，那么就可以正常显示，如果是返回的复杂的json数据就无法正常相应，非常的郁闷，在此记录一下解决该问题的方法，希望对遇到此类问题的童鞋们能够有所帮助。

1、引入jquery的相关js和css代码

@Scripts.Render("~/Scripts/jquery-1.10.2.min.js")    
@Styles.Render("~/Content/jquery-ui.css")    
@Scripts.Render("~/Scripts/jquery-ui.js")

2、基本的调用autocomplete的代码

客户端js代码

服务器代码

public ActionResult GradeAutoComplete(string term)
{
      List tmp = db.Products.Select(x => x.Grade).Distinct().Where(x => x.Contains(term)).ToList();
      return Json(tmp, JsonRequestBehavior.AllowGet);
}

返回的JSON数据

["abcdefgh","Brazos","Laredo","San Jacinto","Scavino"]

3、返回复杂JSON数据格式时的其他调用模式

客户端代码

服务器代码

public ActionResult SkuAutoComplete(string term)
        {
            List tmp = new List();
            //List tmp = new List();
            foreach(var it in db.Skus.Where(x => x.name.Contains(term)))
            {
                Product_Item_Type_Lookup pitl = db.Product_Item_Type_Lookup.Find(it.ItemType);
                tmp.Add(new SkuSingle { value = it.ID, label = it.name, barcode = it.barcode, ItemType = pitl.type });
                //tmp.Add(it.name);
            }
            
             return Json(tmp, JsonRequestBehavior.AllowGet);


        }

返回的JSON数据

[{"value":5,"label":"RGPA316Y","barcode":"811617024055","ItemType":"Product"},{"value":10,"label":"RRPA316","barcode":"812788019316","ItemType":"Product"}]

此时可以具备自动填充的内容，这里面最关键的是返回的JSON数据必须包含label和value的项，否则不能正常显示出自动填充的下拉框，而此处我也是浪费了一段时间，当然是因为我没有去看自动填充的注意事项的原因，也没有看到具体介绍。

4、注意事项

注意返回复杂JSON数据对象的时候，一定要具备label属性，否则不能够正常显示出自动填充的下啦框