老生常谈:Asp.net MVC 3+ Jquery UI Autocomplete实现百度效果
常见的示例很多,本文只是我的工作记录。
前台页面:
@{ 
  
    ViewBag.Title = "首页"; 
  
} 
  
@section Header 
  
{ 
  
    <script type="text/javascript"> 
  
        $(document).ready(function () { 
  
            $("#keyword").autocomplete({ 
  
                source:function (request, response) { 
  
                    $.ajax({ 
  
                        url: "@Url.Action("Search", "Home")",  //要查询的Action 
    
                        type: "POST",  //Post提交 
    
                        dataType: "json", //json格式数据,默认是text 
    
                        data: { keyword:request.term}, //参数,不知道为什么?请指点
//data: {keyword:$("#keyword").val()},同样可以
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.value}; //将返回的jsonresult的属性赋值给autocomplete item
}));
}
});
},
focus: function(event, ui) {
$('#keyword').val(ui.item.label); //选中item的文本
                 return false; 
  
                }, 
  
                select: function(event, ui) { 
  
                     $('#keyword').val(ui.item.label);  //选中item的文本
                     $('#txtSelectValue').val(ui.item.value); //选中item的值 
    
                     return false; 
  
               } 
  
            }); 
  
        }); 
  
    </script> 
  
} 
  
关键字: 
  
@Html.TextBox("keyword", "")
@Html.Hidden("txtSelectValue") //智能查询选中的值
Action代码:
// GET: /Home/Index
// POST: /Home/Search
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Search(string keyword)
{
//根据关键字查询,返回json格式对象集合
第一种方式:循环
List<object> items=new List<objects>();
var item=new {text="",value=""}
items.Add(item);
第二种方法:直接用linq to Entity添加
var dataList= organService.AddDataList();//获取数据列表
     items.AddRange(dataList.Select(o => new 
  
     { 
  
         text= o.NAME, 
  
         value= o.CODE.ToString() 
  
      }));
//---------------------------------------
return Json(items, JsonRequestBehavior.AllowGet);
}