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

    }

  • 相关阅读:
    [YTU]_2637(编程题:类---矩形类)
    [YTU]_2625( 构造函数和析构函数)
    [YTU]_2498 (C++类实现最大数的输出)
    [YTU]_2433( C++习题 对象数组求最大值)
    [YTU]_2432( C++习题 对象数组输入与输出)
    AC自动机模板1
    trie字典树
    KMP模板
    Count(广工14届竞赛)
    zyb的面试(广工14届比赛)
  • 原文地址:https://www.cnblogs.com/fjzhang/p/2220551.html
Copyright © 2020-2023  润新知