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