老生常談：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);

}