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);

}