zoukankan      html  css  js  c++  java
  • 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);

    }

  • 相关阅读:
    十大排序算法
    SQL优化指南
    Python基础-类与对象
    Python基础-函数
    Python基础-字典
    Python基础-字符串
    Python基础-列表
    以太坊智能合约开发框架Truffle
    比特币钱包搭建与使用
    矩阵的压缩存储
  • 原文地址:https://www.cnblogs.com/fjzhang/p/2220551.html
Copyright © 2011-2022 走看看