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

}